javascript - 检测区别于单击并拖动或双击并拖动的单击事件

Question

有什么方法可以区分单击事件，使其与用户实际结束拖动鼠标的时间区分开来吗？我有一些充满链接的文本，并希望用户可以轻松地单击并拖动文本以选择某些文本，但是链接使这变得困难，因为浏览器将其解释为他们试图拖动链接，而不是选择一些文本。所以我解决这个问题的方法是使用 <a onClick=...>而不是 <a href> ，因为浏览器允许我将鼠标拖到它上面，就像普通文本一样。

但是，这似乎只有在我单击并将鼠标拖到两个单独的 <a> 上时才有效。标签:如果选择完全在 <a> 内部标记事件仍然会触发，如果我尝试双击并拖动文本，它也会触发。

所以我想知道除了使用 onMouseDown 是否还有其他方法可以做到这一点和 onMouseUp并手动跟踪延迟以确定用户在做什么。

我知道有些浏览器提供了通过按住修改键来拖动链接的选项，但我很好奇是否有更简单的方法可以做到这一点，而无需用户了解该功能。

Answer 1

观点文章

虽然这可能是可行的，但请考虑可访问性以及它如何满足您的项目需求。使用 onclick 的导航不提供相同的可访问性优势，而且它需要浏览器可以免费完成的大量重新发明工作。

我知道移动设备通常允许长按访问文本选择/上下文菜单组合；在桌面上，它会因设备/浏览器而异。

---

实际答案

我能想到的唯一“仅检测点击”实现是使用三个处理程序，分别为 mousedown、mouseup 和 mousemove。前方未经测试的代码!

let clicked = false;
document.addEventListener('mousedown', e => { clicked = true; });
document.addEventListener('mousemove', e => { clicked = false; });
document.addEventListener('mouseup', e => { 
    if(clicked) {
        // The mouse was clicked without moving it around!
        // Do your "only clicked" logic in here.
    }

    // Reset this back to false for next time
    clicked = false; 
});