即使在stopPropagation之后，mouseenter事件也会被调用两次
我是jquery的新手，现在面临着一个奇怪的问题。 我成功地将其缩小到一个事实，即鼠标中心事件被调用两次：一次用于包含div（这是我的意图），再次用于此div中的元素（不好）。 我尝试使用’return false’和’stopPropagation’，但它似乎不起作用。 这是代码：
$(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; }); });
ORIG HTML
ORIG HTML
你也可以在这里看到它： http ： //jsfiddle.net/rFqyP/3/
任何帮助将非常感谢！
您可以通过使用标志来防止代码卡住，以便您可以检测到何时获得双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")); } ); });
然而，这将无法解决尺寸差异的问题。 当您通过底部边框向外移动元素时，它会增长并导致鼠标中心事件，这会再次改变大小，以便鼠标在外面但不会导致鼠标事件，使元素看起来像鼠标仍在盘旋。
从p元素中重新定义边界可以完全解决问题，而不需要标记，因为它是导致大小差异的边界。
发生的事情是mouseenter事件连续两次触发（你可以通过一些console.log调用轻松测试）。 这是有问题的，因为它将更改元素的html（并使其只是“测试”字符串），然后在第二次连续运行时它将获取html并将其保存到元素的数据。 但是由于没有触发mouseleave事件，如上所述，html是“test”字符串，所以现在它将它保存到元素数据中。
之后， mouseenter和mouseleave事件继续正常启动，但元素的html及其数据都具有相同的“test”字符串，因此它不会更改。
mouseenter连续两次触发的原因是边界。 div的尺寸发生变化，因此会发生以下一系列事件：
-
mouseenter（div变薄） -
mouseleave（div变得更厚，这将导致几乎自动的mouseenter） -
mouseenter如2中所述，因为即使鼠标离开div，div也会扩展，因此鼠标进入。 但是自从mouseenter，div转到了“test”字符串，并变得更薄，所以现在鼠标超出了div的边界，但没有触发鼠标。 - 下次我将鼠标hover在div上时，
mouseenter将再次触发<==这是连续两次
您可以看到这种情况发生，例如，如果您用鼠标慢慢输入上述某些事件，则不会发生，并且它实际上会按预期工作。
顺便说一句，我不认为交换HTML内容是最好的主意。 如果你想切换东西，我建议hide()和show() 。 首先，它可以保存事件处理程序，并且更直观。 你有兴趣隐藏东西，而不是序列化和保存。
我认为第二个不起作用，因为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")); }); });
我看到的问题（调试后）是。 你有div和p所以……
将鼠标hover在具有p的div上时，首先会触发div“mouseover”事件，该事件存储整个html，包括p标记。
但在将此html写回div之前，会触发“p”鼠标hover，用文本而不是html替换您的数据。
然后你的文字最终被写入div。