如果光標已經在元素內部，請避免觸發mouseover事件？

我有了這個div可以運行的小動畫，只要你在它的鼠標：如果光標已經在元素內部，請避免觸發mouseover事件？

$('.cg-panel').bind('mouseover.anim', function() { 
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800); 
});

的問題是，.cg-panel坐在另一div所顯示和隱藏的頂部，它的需要：

$('#control_grid').show();

當顯示「控制網格」時，鼠標懸停事件立即觸發。只有當鼠標從側面進入時，我不希望它會觸發，如果您的鼠標已經超過它。

我該如何避免觸發第一個事件？

example fiddle - 嘗試在鉻。它出於某種原因鎖定了Firefox，不知道爲什麼。

I can't bind the event after it's shown either

來源

2012-09-08 mpen

如果您只是希望它在第一次輸入div時發生，爲什麼不用你用mousenter？ –

@JoshMein：我都試過。同樣的行爲。 – mpen

你可以給我們一個jsfiddle，以便我們可以確切地看到你在做什麼？ –

這是一種很難驗證這一理論沒有你的HTML和你想要什麼樣的更好的描述;但是，由於您只想在拳頭輸入div時發生事件，是否有一個原因，您不想使用mouseenter而不是mouseover？

$('.cg-panel').bind('mouseenter.anim', function() { 
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800); 
});

另請注意，這取決於你使用的是什麼版本的jQuery，bind()已被廢棄，由on()已被替換。

$('.cg-panel').on('mouseenter.anim', function() { 
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800); 
});

編輯：

我tweeked您的演示一點點，我想出了this possible solution。

來源

2012-09-08 19:42:21

是的，因爲它具有完全相同的行爲。顯示時會觸發它。 – mpen

這裏是一個例子：http://jsfiddle.net/rJfc9/3/我不建議在Firefox中運行它。看起來額外的粗略和鎖定我的瀏覽器。嘗試在鉻。馬上把鼠標放在盒子裏，然後等待它變成黃色。事件不會立即開始，但只要將鼠標移動一個像素即可。 – mpen

我明白你的意思了，但是你什麼時候想要展示這個div？你究竟想達到什麼目的？似乎有一種更簡單的方法，但這可能是因爲我不明白你想要做什麼。 –

「控制網格」顯示在onclick事件中。如果我設置在同一時間的變量，

$cg.show().data('flash', false);

然後，我可以用它來防止第一「閃」：

$('.cg-panel').on('mouseenter.anim', function() { 
    if($cg.data('flash')) { 
     $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800); 
    } else { 
     $cg.data('flash', true); 
    } 
});

這隻能是因爲我的網覆蓋了整個屏幕，所以它的當鼠標出現時，不可能將鼠標放在其中一個面板上。（除非可能我添加鍵盤事件.....這是一個計劃......但是，我沒有更好的解決方案）

來源

2012-09-08 21:41:00 mpen

如果光標已經在元素內部，請避免觸發mouseover事件？

回答

相關問題