2011-08-22 95 views
0

我需要的是:在一段時間後觸發事件處理程序

如果用戶將元素懸停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); 
}); 

回答

6

你可以聽mouseentermouseleave事件並清除計時器在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從回調不意味着什麼)。您必須將它們直接放入事件處理程序中。

+0

工作完美。謝謝! –

+0

爲什麼不'mouseover'和'mouseout'?有什麼區別?總之,本來要回答這個[測試用例](http://jsfiddle.net/aqDhj/)。 –

+0

@Shadow:如果你輸入元素的後代,'mouseout'和'mouseover'也會被觸發。而且在大多數情況下,你不需要這樣做。 –

相關問題