在一段时间后触发事件处理程序

Question

我需要的是：

如果用户将元素悬停1秒以上，事件就会发生，否则它不应该发生。

我试过使用setTimeout()，但它只是延迟事件，并不会在鼠标离开元素时将其取消。

有没有其他方法可以解决这个问题？

$(".optionCont").live('mouseover', function(e){ 
    var $this = $(this); 
    setTimeout(function(){ 
     $(".dropMenuCont").stop(true,true).slideUp(200); 
     if($this.next().css("display") == "none"){ 
      $this.next().stop(true,true).slideDown(200); 
     }else{ 
      $this.next().stop(true,true).slideUp(200); 
     } 
      e.preventDefault(); 
      e.stopPropagation(); 
      return false; 

    }, 1000); 
}); 

Answer 1

你可以听mouseenter和mouseleave事件并清除计时器在mouseleave事件处理程序：

$(".optionCont").live('mouseenter', function(e){ 
    var $this = $(this); 
    var timer = setTimeout(function(){ 
      //... 
    }, 1000); 
    $this.data('timer', timer); 
}).live('mouseleave', function(e) { 
    clearTimeout($(this).data('timer')); 
}); 

更新：

顺便说一句。这些行setTimeout回调

e.preventDefault(); 
e.stopPropagation(); 
return false; 

不会有任何影响，因为在一次执行回调，事件已冒泡和触发的默认操作（更不用说return false从回调不意味着什么）。您必须将它们直接放入事件处理程序中。