滚动事件不会传播到父级

Question

我有一个grid-div overflow-y: scroll;和这个grid-div有一段时间10000像素长.在grid-div的特定项目的mouserhover上,我正在触发mouserhover事件,并且用户在元素上显示工具提示.现在用户在body元素下添加此弹出窗口.并且用户在窗口上写了滚动事件,如果触发了滚动事件,则隐藏工具提示.但是当用户仍在我的grid-div上时,仅在grid-div上触发滚动事件,并且事件不会传播到任何父元素(html,body,window),因此用户无法隐藏该元素.

那么为什么滚动事件不像点击事件那样传播？传播事件的可能解决方案是什么？

下面是一个例子小提琴,我面对的问题,在这里,我没有添加提示而只是示例代码来重现滚动问题.在这里,我期待每个"Scrolled On div"都应该在日志中写入"Scrolled On Window".

$(window).on("scroll", function() {
  // While scrolling on div why this event is not fired?
  $('#eventData').append('<div>Scrolled On Window</div>');
});

$('#grid-div').on("scroll", function() {
  $('#eventData').append('<div>Scrolled On div</div>');
});

#grid-div {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="grid-div">
  <br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A
</div>
<div id="eventData">
</div>

Answer 1

当滚动事件是触发事件的元素时,它不会冒泡

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

气泡:不在元素上,而是在文档上触发时向默认视图添加气泡

如果您还想要执行窗口滚动事件,则需要自己触发它

$(window).trigger("scroll");

$(window).on("scroll", function(e,e2) {
  // While scrolling on div why this event is not fired?
  //get original event if triggered programmatically
  e = e2 || e;
  $('#eventData').append('<div>Scrolled On Window</div>');
});

$('#grid-div').on("scroll", function(e) {
  $('#eventData').append('<div>Scrolled On div</div>');
  //all parameters after the first will be passed to the event callback
  //so here passing it the original event.
  $(window).trigger("scroll",e);
});

#grid-div {
  height: 100px;
  overflow-y: scroll;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="grid-div">
  <br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A
</div>
<div id="eventData">
</div>