即使在 stopPropagation 之后也调用了两次 mouseenter 事件

Question

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

<!-- 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>

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

任何帮助将不胜感激！

Answer 1

发生的情况是mouseenter 事件连续触发两次（您可以通过一些console.log 调用轻松测试这一点）。这是有问题的，因为它会更改元素的 html（并使其只是“测试”字符串），然后在第二次连续运行时，它将获取 html 并将其保存到元素的数据中。但是由于没有触发 mouseleave 事件，如上所述，html 是“测试”字符串，所以现在它将 that 保存到元素数据中。

之后，mouseenter 和 mouseleave 事件继续正常触发，但元素的 html 及其数据都具有相同的“测试”字符串，因此不会改变。

mouseenter 连续触发两次的原因是因为边界。 div 的尺寸发生变化，因此会发生以下一系列事件：

1. mouseenter（div变细了）
2. mouseleave（div 变粗会导致几乎自动出现mouseenter）
3. mouseenter 如 2 所述，因为即使鼠标离开了 div，div 也展开了，所以鼠标进入了。 但是自从mouseenter被触发后，div到了“test”字符串，变得更细了，所以现在鼠标已经超出了div的边界，但是没有触发mouseleave。李>
4. 下次我将鼠标悬停在 div 上时，mouseenter 将再次触发

您可以看到这种情况正在发生，例如，如果您用鼠标缓慢输入上述某些事件并没有发生，它实际上会按预期工作。

顺便说一句，我不认为交换 html 内容是最好的主意。如果你想切换，我建议hide() 和show()。首先，这节省了事件处理程序，并且更直观。你对隐藏东西感兴趣，而不是序列化和保存。

Answer 2

您可以通过使用标志来防止代码卡住，这样您就可以检测到何时收到双重mouseenter事件：

$(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/

但这并不能解决大小差异的问题。当您通过从底部边框移出离开元素时，它会增长并导致mouseenter 事件，该事件再次更改大小以使鼠标在外面但不会导致mouseleave 事件，使元素看起来像鼠标还在徘徊。

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

Answer 3

我认为第二个不起作用，因为 html 不同。如果您使用相同的 html，则根本不需要 stopPropagation 或 return false。看小提琴：http://jsfiddle.net/aC3TG/1/

$(function (){
    $(".testDiv").hover(
    function(e) /* IN */ {
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
    }, function(e) /* OUT */ {
        $(this).html($(this).data("htmlBackup"));

    });
});         

Answer 4

我看到的问题（调试后）是。你里面有 div 和 p 所以...

当您将鼠标悬停在具有 p 的 div 上时，首先会触发 div "mouseover" 事件，该事件会存储包括 p 标签在内的整个 html。

但在将此 html 写回 div 之前，会触发“p”鼠标悬停，它将您的数据替换为文本而不是 html。

然后你的文本最终被写入 div。