如果发生平移（mousedown + mousemove + mouseup），防止任何元素上的单击事件答案

【问题标题】：Prevent click event on any element if a pan (mousedown + mousemove + mouseup) occurred如果发生平移（mousedown + mousemove + mouseup），防止任何元素上的单击事件
【发布时间】：2014-01-06 20:55:18
【问题描述】：

我有一个包含许多元素的页面，每个元素都有一个绑定到 click 事件 的回调。

页面大于视口，用户可以按标准方式滚动（使用鼠标滚轮、滚动条...）

现在我需要实现一个平移模式，为用户提供另一种滚动页面的方式：

用户点击，鼠标向下拖动，页面滚动。

我在 body 元素上轻松实现了注册 mousedown、mousemove 和 mouseup。当用户拖动时，我使用 window.scrollTo()

滚动窗口

问题：当页面在鼠标指针下移动时，如果用户平移页面并点击一个元素，那么 mousedown 和 mouseup 会发生在同一个元素上，这会触发 在 mouseup 之后在该元素上也单击事件。

这种偏离路线是不受欢迎的。

点击事件在子元素上（鼠标向下移动在主体上），所以 stopPropagation 没有帮助。

问题：在 mouseup 回调结束时，当实际发生拖动时（我可以检查这个比较初始和最终鼠标坐标），我可以阻止点击事件触发吗？

【问题讨论】：

只是一个评论：设置一个全局变量并在点击事件上检查它。并在拖动时更改它。这是我的第一个想法
是的，如果我找不到更优雅、更简单的解决方案，我会这样做。我不喜欢让 click 事件的每个回调都检查全局。

标签： jquery onclick jquery-events pan mouseup

【解决方案1】：

您可以通过在正文的捕获阶段简单地取消点击事件来轻松做到这一点：

document.body.addEventListener("click", allowClick, true);
function allowClick(event) {
    if (panMode) {
        event.stopPropagation();
    }
}

请参阅this fiddle，了解基于全局标志忽略点击的示例。（在最新的 Firefox、Chrome 和 IE 中测试。）

请参阅javascript.info，了解 Javascript 中事件的捕获和冒泡阶段的清晰描述。

【讨论】：

效果很好。不幸的是，我想支持更多时间 IE8 并且不支持 addEventListener。所以我必须在每次点击回调时检查“panMode”......这是我试图避免但似乎没有别的办法。