子元素及其父元素的鼠标轮处理程序

Question

我制作了一个jQuery插件，用我自己的滚动条替换默认滚动条并处理鼠标滚动并拖动条形事件。

当我使用我的滚动条将内容与滚动条放在另一个内容中时，如果我在子内容上使用鼠标滚轮，那么父内容也会转动。

之所以发生这种情况，是因为我将mousewheel事件监听器绑定到子内容和父内容，当我将鼠标放在它们两者上时，它会触发两个事件处理程序。

问题是我需要在不影响父级内容的情况下仅轮播子级内容。

您有什么提示可以解决这个问题吗？拖动滚动条事件可以正常工作。

Answer 1

您需要停止事件的传播。这将阻止事件冒泡DOM树并触发父元素。

http://jsbin.com/yelijelowa/1/edit?js,output

$('body').on('mousewheel', function (e) {
  alert('Body scroll');
});

$('.child').on('mousewheel', function (e) {
  e.stopPropagation();

  alert('Child scroll only');
});

如果您注释掉e.stopPropagation();行，则会注意到两个警报都会触发。

文档：

• MDN
• jQuery API