Question

大家好，

我正在构建一个包含快速间隔和scrollTop修改的应用程序。我有一个溢出的div，每个间隔周期更新是该div的scrollTop位置。我遇到了一个非常奇怪的click事件处理程序行为，它不会触发。

HTML：

<div id="wrapper">
    <div class="cube red"></div>
    <div class="cube gray"></div>
    <div class="cube blue"></div>
    <div class="cube green"></div>
    <div class="cube orange"></div>
</div>

CSS：

* {border:0px; margin:0px; padding:0px;}
#wrapper {width:350px; height:100px; overflow:hidden;}
#wrapper .cube {width:350px; height:100px; float:left;}

.red {background-color:#f00;}
.gray {background-color:#454545;}
.blue {background-color:#1d5ef3;}
.green {background-color:#0c0;}
.orange {background-color:#f60;}

使用Javascript：

var myInterval;
var i = 1;
var el = $('#wrapper');
var cubeNum = ('.cube').length;

el.click(function(){
    clearInterval(myInterval);
});

myInterval = setInterval(function(){
    el.scrollTop(i * 100);
    i++;
    if(i >= cubeNum)
        i = 0;
},16.6);

您可以在这里看到一个简单的错误示例：
http://jsfiddle.net/rMN55/

您可以注意到第一次点击时不会触发点击处理程序。如果你将间隔提高到300毫秒，那么一切正常。

我注意到的另一件事是，如果我将处理程序更改为mousedown（具有相同的16.6 ms间隔），那么一切都可以正常工作。

使用Javascript：

var myInterval;
var i = 1;
var el = $('#wrapper');
var cubeNum = ('.cube').length;

el.mousedown(function(){
    clearInterval(myInterval);
});

myInterval = setInterval(function(){
    el.scrollTop(i * 100);
    i++;
    if(i >= cubeNum)
        i = 0;
},16.6);

使用附加的mousedown处理程序查看相同的示例：
http://jsfiddle.net/rMN55/1/

这是jQuery处理点击的方式的错误吗？
我应该在错误报告系统中打开票证吗？

使用setInterval的jquery click事件处理程序的奇怪行为

0 个答案: