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

Question

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

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

之所以会发生这种情况，是因为我将鼠标轮事件侦听器绑定到子内容和父内容，而当鼠标同时覆盖它们时，它会触发两个事件处理程序。

问题是，我只需要转动子内容，而不影响父.。

你有什么办法解决这个问题吗？拖动滚动条事件正常。

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