即使在停止传播之后，mouseenter事件也会被调用两次 [英] mouseenter event called twice even after stopPropagation

问题描述

我是jquery的新手，现在面临一个奇怪的问题。我成功地将它缩小到一个事实，即mouseenter事件被调用两次：一次为包含div（这是我的意图），再次为这个div中的元素（不好）。我尝试使用'return false'和'stopPropagation'，但它似乎不起作用。
这里是代码：

 <！ -  JS文件（顺序很重要！） - > 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js>< / script> 
 
 
< script type =text / javascript> 
 $（函数（）{
 $（。testDiv）。hover（
函数（e）/ * IN * / {
 $（this）.data（ $（this）.html（））; 
 $（this）.html（TEST 123）; 
 e.stopPropagation（）; 
 return false; 
），函数（e）/ * OUT * / {
 $（this）.html（$（this）.data（htmlBackup））; 
 e.stopPropagation（）; 
返回false; 
}）; 
}）; 
< / script> 
  

 <！ - 这个工作 - > 
< div class =testDivstyle =border：solid> ORIG HTML< / div> 
 
< br /> < br /> < br /> 
 
 <！ - 这不起作用 - > 
< div class =testDivstyle =border：solid> < p style =border：solid> ORIG HTML< / p>< / div> 
  

你可以也可以在这里看到： http://jsfiddle.net/rFqyP/3/

任何帮助都将非常感谢！

解决方案

通过使用一个标志卡住，以便您可以检测何时出现双 mouseenter 事件：

 < $ c $（函数（）{
 
 var内= false; 
 $ b $（。testDiv）。hover（
函数（e） / * IN * / {
 if（！inside）{
 inside = true; 
 $（this）.data（htmlBackup，$（this）.html（））; 
 $（this）.html（TEST 123）; 
} 
}，function（e）/ * OUT * / {
 inside = false; 
 $ （this）.html（$（this）.data（htmlBackup））; 
} 
）; 
 
}）; 
  

http://jsfiddle.net/rFqyP/16/

然而，这不会解决尺寸差异的问题。当通过移出底部边框离开元素时，元素会增长并导致 mouseenter 事件，该事件再次更改大小，以便鼠标位于外部但不会导致<

从 p 元素完全解决了问题，不需要标记，因为它是导致大小差异的边框。

I'm new to jquery and am facing now a weird problem. I succeeded to narrow it down to the fact that a mouseenter event is called twice: once for the containing div (this was my intention) and again for elements within this div (not good). I tried to use 'return false' and 'stopPropagation' but it doesn't seem to work. here's the code:

<!-- JS files (order matters!) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>


<script type="text/javascript">
$(function (){
    $(".testDiv").hover(
    function(e) /* IN */ {
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
        e.stopPropagation();
        return false;
    }, function(e) /* OUT */ {
        $(this).html($(this).data("htmlBackup"));
        e.stopPropagation();
        return false;
    });
});         
</script>

<!-- this one works -->
<div class="testDiv" style="border: solid">ORIG HTML</div>

<br /> <br /> <br />

<!-- this doesn't work -->
<div class="testDiv" style="border: solid"> <p style="border: solid">ORIG HTML</p></div>

you can also see it here: http://jsfiddle.net/rFqyP/3/

Any help will be very much appreciated!

解决方案

You can keep the code from getting stuck by using a flag, so that you can detect when you get double mouseenter events:

$(function(){

  var inside = false;

  $(".testDiv").hover(
    function(e) /* IN */ {
      if (!inside) {
        inside = true;
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
      }
    }, function(e) /* OUT */ {
      inside = false;
      $(this).html($(this).data("htmlBackup"));
    }
  );

});

http://jsfiddle.net/rFqyP/16/

This will however not solve the problem with the size difference. When you leave the element by moving out by the bottom border, it grows and causes a mouseenter event, which again changes the size so that the mouse is outside but without causing a mouseleave event, leaving the element looking like the mouse is still hovering it.

Remving the border from the p elements solves the problem completely, without a need for a flag, as it's the border that is causing the size difference.

这篇关于即使在停止传播之后，mouseenter事件也会被调用两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！