滚动事件未传播到父级

时间:2016-05-31 12:05:51

标签: javascript jquery

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

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

以下是我面临的问题的fiddle示例,这里我还没有添加工具提示,只有示例代码才能重现滚动问题。在这里,我期待着每一个" Scrolled On 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>');
});
&#13;
#grid-div {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid gray;
}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:6)

当滚动事件是触发事件的元素

时,它不会冒泡
  

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

     

Bubbles:不在元素上,而是在触发时向默认视图冒泡   在文件上

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

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

答案 1 :(得分:2)

有一种已知的方法,如按其他人的建议手动触发事件

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

然后还有另一种通用方法,就是在捕获阶段监听滚动事件(较旧的IE浏览器不支持此功能)。

document.addEventListener("scroll", function() {
  console.log("document Scrolled during capture phase")
}, true);