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树，防止任何父母的处理者通知了这一事件。

在IE中悬停行为怪异

2 个答案: