Jquery懸停取消操作

Question

我想在鼠標懸停在另一個DOM元素上時顯示div，但如果在顯示div之前移動鼠標，我想取消此操作。到目前爲止，這是我

HTML

<div id="msg"> 
    <a href="#" id="33"> HERE </a> 
</div> 

JS

var timer; 
$("body").on('mouseenter', '#msg a',function(){ 
    var userHover = $(this).attr("id"); 
    timer = setTimeout(function() { 
     alert(userHover); 
    }, 1000); 
}).on('mouseleave', '#msg a', function(){ 

}); 

http://jsfiddle.net/Nyrdz/

任何幫助表示讚賞。

Answer 1

您正在尋找clearTimeout()：

var timer; 
$("body").on('mouseenter', '#msg a', function(){ 
    var userHover = $(this).attr("id"); 
    timer = setTimeout(function() { 
     alert(userHover); 
    }, 1000); 
}).on('mouseleave', '#msg a', function(){ 
    clearTimeout(timer); 
}); 

但是，如果你有一個以上的元件匹配#msg a我強烈建議你存儲在特定元素的數據timer值。

$("body").on('mouseenter', '#msg a', function(){ 
    var userHover = $(this).attr("id"); 
    $(this).data('timer', setTimeout(function() { 
     alert(userHover); 
    }, 1000)); 
}).on('mouseleave', '#msg a', function(){ 
    clearTimeout($(this).data('timer')); 
});