Question

我制作了这个简单的代码来理解它是如何工作的：

<div title="1">
    one
    <p title="2">two</p>
</div>
<br />
<div id="result"></div>
<script src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){   
    //$("body").on("mouseover","*",function(){
    //$("body").on("mouseenter","*",function(){
        var html = $(this).attr("title");
        console.log(html);
        $("#result").text(html);
    //});
});
</script>

当我使用mouseover时，问题是当我指向two时，事件监听器将首先触发two然后再触发one，因此效果就像我指出one。

另一方面，如果我使用mouseenter，如果我指向two而未指向one，则会出现问题，效果将为one。如果我指向one，然后指向two，然后再指向one，则根本不会产生任何效果，因为two是one的一部分所以js看到我仍然在one并且没有工作。

有没有解决方案？

Answer 1

这是由于事件冒泡，你可以参考解决方案

http://api.jquery.com/event.stoppropagation/

您还可以使用全局标志变量来检测事件

Answer 2

基本上，mouseover和mouseenter之间的差异是

与mouseover类似，mouseenter的不同之处在于它不是bubble而是它当指针从其后代之一移动时，不会发送物理空间到自己的物理空间。

如果你使用mouseover，它会冒泡，所以事件监听器将在尖头元素及其祖先上触发（你的第一个问题）。

如果你使用mouseenter，当指针从一个后代的物理空间移动到它自己的物理空间时（第二个问题），它就不会被触发。

你需要的是mouseover没有冒泡。没有特定的事件，但您可以使用stopPropagation手动阻止它冒泡：

$("body").on("mouseover", "*", function (e) {
    e.stopPropagation();
    var html = $(this).attr("title");
    console.log(html);
    $("#result").text(html);
});

Demo

Answer 3

通过将"[title]"添加到选择器可以轻松解决此问题。您可以找到工作演示here in jsfiddle

当鼠标从子节点悬停到父节点时运行的jquery事件

3 个答案: