javascript - li标签重复了onmouseover/onmouseout调用

我有以下代码。（您可以将其复制到文件中以在Firefox中进行调试，并在Firebug的“控制台”选项卡中查看输出）。

当我在onmouseover标记中添加li envent并将鼠标移到li区域时，控制台信息就会出来。

问题是，当我将鼠标从图像（Google徽标）移动到其下方的文本时，会打印出多个信息。为什么由于我没有离开onmouseout区域而触发了li事件？

在这种情况下，我应该怎么做才能防止触发onmouseout事件。

谢谢！！

<html>
<body>

<div>
    <ul>
        <li onmouseover="console.info('over')" onmouseout="console.info('out')" style="float:left;display:block;width:30%;height:200px;border: 2px solid red;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
        <li style="float:left;display:block;width:30%;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
        <li style="float:left;display:block;width:30%;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
    </ul>
</div>

</body>
</html>

最佳答案

Events bubble up the DOM tree。因此，当光标离开img元素时，会生成一个mouseout事件，并触发绑定到父li元素的事件处理程序。

有两种方法可以解决这种情况：

防止事件冒泡

如果要防止事件冒泡，请为事件发生的元素分配事件处理程序，然后调用event对象的stopPropagation方法（或IE中的cancelBubble属性）：

function handler(event) {
    event = event || window.event; // IE
    if(event.stopPropagation) {
        event.stopPropagation();   // W3C
    }
    else {
        event.cancelBubble = true; // IE
    }
}

问题是您必须将此处理程序绑定到每个子元素，这不是很方便。因此，以下方式更容易实现。

测试事件的起源

您可以引用事件起源于event.target（或IE中的event.srcElement）的元素。绑定到li元素的事件处理程序应如下所示：

function handler(event) {
    event = event || window.event; // IE
    var target = event.target || event.srcElement; // IE

    if(target === this) {   // event originated where the handler was bound to
        console.info('out');
    }
}

并用

onmouseout="handler.call(this, event);"

请注意，绑定事件处理程序inline就像您所做的那样，是糟糕的设计，因为它将演示文稿与应用程序逻辑混合在一起。有two other种方法来绑定事件处理程序

我建议阅读articles about event handling on quirksmode.org。

关于javascript - li标签重复了onmouseover/onmouseout调用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8414345/