Question

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

当我将onmouseover envent添加到li标记，并将鼠标移动到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>

Answer 1

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

您可以通过两种方式来处理这种情况：

防止事件冒泡

如果要阻止事件冒泡，可以为事件发起的元素分配一个事件处理程序，并在IE中调用event对象的stopPropagation方法（或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。

Answer 2

除onMouseOver和onMouseOut之外，还有onMouseEnter和onMouseLeave的概念。 Actualy我不知道它在不同的浏览器中是如何implemented的。我使用jQuery，它为我做了所有的事情。阅读所有相关内容here，并举例说明在页面底部使用不同事件时发生的情况。

复制onmouseover / onmouseout调用li标签

2 个答案: