javascript - 滚动事件不会传播到父级

Question

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

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

这是一个例子 fiddle关于我面临的问题，这里我没有添加工具提示，而只是重现该滚动问题的示例代码。在这里，我期望对于每个“在 div 上滚动”，都应该在日志中写入“在窗口上滚动”。

$(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

Bubbles: Not on elements, but bubbles to the default view when fired on the document

如果你还想执行窗口滚动事件，你需要自己触发

$(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>