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')); 
});