2

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

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

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

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

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

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

这是不受欢迎的。

click 事件在子元素上（鼠标 owm-move-up 在 body 上），所以stopPropagation没有帮助。

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

4

1 回答 1

6

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

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

有关忽略基于全局标志的单击的示例，请参见此小提琴。（在最新的 Firefox、Chrome 和 IE 中测试。）

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

于 2014-01-06T22:09:24.960 回答