Question

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

这是我的JS小提琴的链接。我希望在用户滚动div后，文本“Hello”会更改为“Bye”。

Herel是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。它可以工作。

jquery.on滚动不起作用

2 个答案: