我有一个带有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;
答案 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);