懸停在IE中表現怪異

Question

看一下下面的HTML代碼：

<div class="overlay">
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
</div>

和這個jQuery代碼：

$('div.overlay').mouseenter(function() { clearTimeout(thumbsAway); });
$('div.overlay').mouseleave(function() { clearTimeout(thumbsAway); $('ul.thumbs').animate({top: '520px'}, 750); });

問題在於，在IE中，將鼠標懸停在任何子元素上也會觸發mouseenter / mouseleave。 我該如何預防？

Answer 1

您可以使用event.stopPropagation（）

$('div.overlay').hover(function(event){
    event.stopPropagation();
    clearTimeout(thumbsAway);
  },
  function(event){
    event.stopPropagation();
    clearTimeout(thumbsAway);
  }
);

或檢查事件的目標。

$('div.overlay').hover(function(event){
    if (this == event.target){clearTimeout(thumbsAway);}
  },
  function(event){
    if (this == event.target){clearTimeout(thumbsAway);}
  }
);

Answer 2

嘗試使用stopPropogation()停止事件傳播：

$('div.overlay').mouseenter(function(e) {
  e.stopPropogation();
  clearTimeout(thumbsAway);
});

---

說明：防止事件使DOM樹冒泡，從而防止任何父處理程序收到該事件的通知。