如何停止在mouseenter/mouseleave上多次觸發切換事件？

我正在使用jQuery切換使用jQuery切換方法的<div>的可見性。在mouseenter和mouseleave事件上觸發切換，從而創建div在mouseenter上摺疊並摺疊在mouseleave上的效果。問題是，如果用戶拖動鼠標幾次，然後離開<div>，div將切換進出幾次。如果用戶不小心在<div>中移動鼠標指針，就會發生這種情況。有沒有人對我如何避免這種行爲有任何想法？如何停止在mouseenter/mouseleave上多次觸發切換事件？

Thanx！

來源

2010-04-09 Tomas Vinter

兩件事情：

如果你要同時使用mouseenter和mouseleave我建議使用hover()功能;和
使用觸發動畫時，使用stop()方法是個好習慣。

所以：

$("div.someclass").hover(function() { 
    $("...").stop().fadeIn("slow"); 
}, function() { 
    $("...").stop().fadeOut("slow"); 
});

注：用適當的選擇取代"..."爲你切換什麼，並使用相應的效果（我使用褪色這裏）。另外，事件處理程序中的this指的是事件的來源。

來源

2010-04-09 08:26:18 cletus

您可以使用更常見的mouseover/mouseout事件來獲取不會觸發內部鼠標移動的懸停事件。

但是在鼠標事件上不要使用toggle，如果是例如，它可能很容易出錯。在頁面加載時鼠標位於元素上方，或者鼠標離開瀏覽器（這可以允許鼠標離開元素邊界而不觸發mouseout）。對於顯示內容的over以及隱藏它的out有單獨的功能。

更好：只是使用hover()方法，這是專門用於此目的。

來源

2010-04-09 08:27:56 bobince

除了Cletus的正確答案之外，我想指出使用mouseenter和mouseleave事件是沒有錯誤的。訣竅只駐留到stop()方法，其實我們還可以這樣做：

$("div.someclass").on("mouseenter", function() { 
    $("...").stop().fadeIn("slow"); 
}); 
$("div.someclass").on("mouseleave", function() { 
    $("...").stop().fadeOut("slow"); 
});

Here是的jsfiddle例如:)

來源

2013-07-14 19:38:51

如何停止在mouseenter/mouseleave上多次觸發切換事件？

回答

相關問題