Question

我正在使用jquery mouseover事件在wordpress中使用ajax获取一些数据，ajax工作正常，但我的问题是当我们将鼠标移到元素上时，更快的事件会触发多个动作，即如果我在鼠标上发出警报如果我在元素上反复移动，我会得到多个警报，我不想要这个，我尝试过unbind，但是没有正常工作。

<ul class="tab-content">
<li><div class="place-holder"></div></li>
<li><div class="place-holder"></div></li>
<li><div class="place-holder"></div></li>
<li><div class="place-holder"></div></li>
</ul>


$(document).on('mouseover', '.place-holder' , function(e){
alert ('hallo');
}

Answer 1

一种解决方案是使用计时器延迟操作。就像：

var timer;
$(document).on('mouseover', '.place-holder' , function(e){
    clearTimeout(timer)
    timer = setTimeout(function(){
        alert('Hallo');
    }, 200)
})

这样，您的事件将在鼠标悬停后0.2秒触发，如果您快速移动则仅触发一次。

Answer 2

$(document).ready(function(){
   $('.place-holder').mouseenter(function(){
      alert('hello');
   })
})

http://api.jquery.com/mouseenter/ - mouseenter jquery参考

Answer 3

实际上问题与Ajax Call有关，当我触发一个事件时，它会在ajax结果出现之前多次触发。所以我所做的是使用像这样的布尔标签

 if (window.isRunning) return;
 window.isRunning = true;

和ajax

complete : function () {
                            window.isRunning = false;
                    }

所以现在它不会多次开火，我从Stack本身得到了这个，多亏了一吨

当快速移动鼠标时，jQuery鼠标悬停事件会多次触发

3 个答案: