jquery - jquery.on 滚动不起作用

Question

我正在尝试构建一个 DOM 事件记录器，以便回放用户如何与页面交互。我想使用 jquery.on 功能，这样我就可以记录页面上的所有事件。在这个特定的例子中，我试图记录滚动事件，但最终我想记录各种事件。

这是我的 JS Fiddle 的链接。我希望用户滚动 div 后，文本“Hello”会变为“Bye”。

http://jsfiddle.net/MnpPM/

这里是html

<div id="parent" style="height: 300px; width: 300px; overflow: scroll">
    <div style="height: 500px; width: 500px">
        Hello
    </div>
</div>

这里是javascript

$(document).on('scroll', '*', function () { $(this).html('Bye') });

Answer 1

该scroll事件不会通过 dom 传播，因此您不能与委托一起使用。

如果要收听scroll事件，则需要将回调直接添加到元素：

$(function() {
     $("#parent").on('scroll', function () { $(this).html('Bye') });
});

Answer 2

正如 t.niese 所说，对于您或任何有类似要求的人来说，使用 mouseenter 和 mouseleave 可能是一种选择，我修改了 jsfiddle 代码，因此它可能会提示谁正在阅读，请注意这是错误的，但您明白了.

http://jsfiddle.net/MnpPM/30/

这是代码：

var scrollCount = 0;
$('body').on('mouseenter','*',function(e){
    console.log('mouseenter');
    $(this).scroll(function(){
           scrollCount++;
           console.log('Current Count:'+scrollCount);
    });   
    $(this).mouseout(function() {
      $(this).unbind();
    }); 
});

我对动态加载的滚动 div 使用了类似的代码，并且可以正常工作。