如果发生了pan（mousedown + mousemove + mouseup），则阻止任何元素上的click事件

Question

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

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

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

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

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

滚动窗口

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

这个过程是不受欢迎的。

点击事件位于子元素上（鼠标按钮向上移动），因此 stopPropagation 无效。

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

Answer 1

只需取消身体捕获阶段的点击事件即可轻松完成此任务：

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

有关忽略基于全局标记的点击的示例，请参阅this fiddle。 （在最新的Firefox，Chrome和IE中测试过。）

有关Javascript中事件的捕获和冒泡阶段的详细说明，请参阅javascript.info。