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

Question

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

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

这是因为我将鼠标滚轮事件侦听器绑定到子内容和父内容，当我将鼠标悬停在它们上面时，它会触发两个事件处理程序。

问题是我只需要轮子内容而不影响父内容。

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

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(); 行，您会注意到两个警报都会触发。

文档：

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

Mousewheel handler for child element and his parent

html

javascript

css

jquery

mousewheel