我是 jQuery 的新手，现在面临一个奇怪的问题。我成功地将其缩小到 mouseenter 事件被调用两次的事实:一次是针对包含的 div(这是我的意图)，另一次是针对此 div 中的元素(不好)。我尝试使用 return false 和 stopPropagation 但它似乎不起作用。
这是代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- 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>
</body>
</html>
你也可以在这里看到:http://jsfiddle.net/rFqyP/3/
非常感谢任何帮助!
最佳答案
发生的事情是 mouseenter 事件连续触发两次(您可以通过一些 console.log 调用轻松测试)。这是有问题的，因为它会更改元素的 html(并使其只是“测试”字符串)，然后在第二次连续运行时它将获取 html 并将其保存到元素的数据中。但是，由于没有触发 mouseleave 事件，如前所述，html 是“测试”字符串，所以现在它将 that 保存到元素数据中。
在那之后，mouseenter 和 mouseleave 事件继续正常触发，但是元素的 html 和它的数据都有相同的“测试”字符串，所以它不会'改变。
mouseenter 连续触发两次的原因是边框。 div 的尺寸发生变化，因此会发生以下一系列事件:
mouseenter(div变细)mouseleave(div 变厚，这将导致几乎自动mouseenter)mouseenter如 2 中所述，因为即使鼠标离开了 div，div 展开了，所以鼠标进入了。 但是自从mouseenter触发后，div 进入“test”字符串，变得更细，所以现在鼠标超出了 div 的边界，但没有触发鼠标离开。- 下次我将鼠标悬停在 div 上时，
mouseenter将再次触发 <== 这是连续两次
你可以看到这种情况的发生，例如，如果你用鼠标慢慢输入，上面的一些事件不会发生，它实际上会按预期工作。
顺便说一句，我不认为交换 html 内容是最好的主意。如果你想切换东西，我建议使用 hide() 和 show()。首先，这节省了事件处理程序，并且更直观。您感兴趣的是隐藏东西，而不是序列化和保存。
关于javascript - 即使在 stopPropagation 之后，mouseenter 事件也被调用了两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6888590/