监听窗口与文档上的滚动事件会导致处理程序之间发生冲突

Question

两者之间有什么区别吗？

$(window).on('scroll', function() { /**/ });

和

$(document).on('scroll', function() { /**/ });

我问的原因是，我已经注意到，如果我有2个处理程序（一个在监听，window第二个在document），并且在某个时候我将return false;在其中document一个window处理程序停止触发，即使事件是命名空间也是如此。

您可以在此处查看行为。从顶部滚动到300px之后，window处理程序的数量不再增加。

如果将window选择器更改为document，则不会发生冲突。

和小提琴代码：

的HTML

<div class="fixed">
  <div>document scroll event: <span class="scroll1">0</span></div>
  <div>window scroll event: <span class="scroll2">0</span></div>
</div>

的CSS

body {
  height: 3000px;
}

.fixed {
  position: fixed;
  top: 20px;
  left: 20px;
}

JS

$(function () {
    var $scroll1 = $('.scroll1');
    var $scroll2 = $('.scroll2');

    function updateCount($el) {
        $el.text(parseInt($el.text(), 10) + 1);
    }

    $(document).on('scroll', function () {
        updateCount($scroll1);
        if ($(this).scrollTop() > 300) {
            return false;
        }
    });

    $(window).on('scroll', function () {
        updateCount($scroll2);
    });
});

Answer 1

活动泡泡

你拥有的是

window
  |
  v
document
  |
  v
body

这是事件的处理方式

1. 用户在身体上滚动
2. 事件滚动触发于 body

3. 检查事件处理程序
   3.1。如果任何事件处理程序body返回false，则在此处停止
   3.2。如果没有注册任何事件处理程序，或者所有事件处理程序都返回true，null或未定义的传递滚动事件给父级（文档，请转到步骤4）

4. 事件滚动触发于 document

5. 检查事件处理程序
   5.1。如果有任何事件处理程序document返回false，则在
   5.2处停止。如果未注册任何事件处理程序，或者所有事件处理程序均返回true，null或未定义，则将滚动事件传递给父级（窗口转到步骤6）

6. 事件滚动触发于 window

7. 检查事件处理程序
   7.1。如果任何事件处理程序window返回false，则在
   7.2处停止。如果没有注册任何事件处理程序，或者所有事件处理程序都返回true，null或undefined，请调用此事件之后的其他事件处理程序。

您可以在＃.1处看到断点的位置。
如果这些断点中的任何一个返回false，则整个气泡序列都将停止。这就像火车上的紧急刹车。不仅您的购物车停在您确定范围/位置的位置，而且整个火车停下来。