6

如何使用鼠标滚轮事件侦听器停止传播？

当在元素上使用鼠标滚轮时，content整个文档也在滚动。

这不起作用：

content.on('mousewheel', function(e, delta){
    content.scrollTop(content.scrollTop() - (40 * delta));
    set_bar();
    e.stopPropagation();
});

解决方案

content.on('mousewheel', function(e, delta){
    content.scrollTop(content.scrollTop() - (40 * delta));
    set_bar();
    return false;
});
4

2 回答 2

6

我认为您混淆了 stopPropgation 和 preventDefault。

  • stopPropagation阻止事件在事件链中冒泡。

  • preventDefault防止在元素上发生默认操作。在这种情况下，它将阻止滚动，例如，对于锚点上的单击事件，它将停止将您带到 href 属性中定义的 URL 的链接。

  • return false另一方面做这两件事。

这是一个重要的区别，因为您可能希望将事件冒泡用于事件委托，同时防止默认操作。

有关更多信息，请参阅这两个帖子：

preventDefault 和 return false 的区别

preventDefault 和 stopPropagation 的区别

于 2014-02-27T09:35:35.870 回答
3

原来的解决方案很接近。
这是有效的：

    $(".myScrollableDiv").on("mousewheel",function(e) {
        var scrollRate = 100;
        var $t = $(this);
        var dy = e.originalEvent.deltaY * scrollRate;
        $t.scrollTop($t.scrollTop() + dy);
        e.preventDefault();
    });

我认为主要原因是jQuery没有给我们第二个参数（delta）但它可以在事件本身中找到。否则没关系。

于 2017-01-02T00:04:10.413 回答