悬停在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树冒泡，从而防止任何父处理程序收到该事件的通知。