jquery - 如果发生平移(mousedown + mousemove + mouseup)，则阻止任何元素上的单击事件

Question

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

页面比视口(viewport)大，用户可以以标准方式滚动(使用鼠标滚轮、滚动条...)

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

用户单击、按下鼠标拖动，页面滚动。

我通过在 body 元素上注册 mousedown、mousemove 和 mouseup 来实现这一点。当用户拖动时，我使用 window.scrollTo()

滚动窗口

问题:当页面在鼠标指针下移动时，如果用户单击某个元素平移页面，则同一元素上会发生 mousedown 和 mouseup ，这会触发 鼠标松开后该元素上也有单击事件。

这当然是不需要的。

点击事件位于子元素上(鼠标向下移动位于主体上)，因此 stopPropagation 没有帮助。

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

Answer 1

您只需在正文的捕获阶段取消单击事件即可轻松完成此操作:

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

参见this fiddle有关根据全局标志忽略点击的示例。 (在最新的 Firefox、Chrome 和 IE 中测试。)

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