0

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

当我将onmouseover事件添加到li标签并将鼠标移动到该li区域时，控制台信息就会出现。

问题是当我将鼠标从图像（谷歌徽标）移动到其下方的文本时，会打印出多个信息。为什么会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>
4

2 回答 2

3

事件在 DOM 树中冒泡。所以当光标离开img元素时，mouseout会产生一个事件并触发绑定到父li元素的事件处理程序。

有两种方法可以处理这种情况：

防止事件冒泡

如果您想防止事件冒泡，您可以为事件发起的元素分配一个事件处理程序并调用event对象的stopPropagation方法（或cancelBubbleIE 中的属性）：

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

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

测试事件的来源

您可以获得对事件源自event.target（或event.srcElement在 IE 中）的元素的引用。您绑定到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是糟糕的设计，因为它将表示与应用程序逻辑混合在一起。还有另外两种绑定 事件处理程序的方法

我建议阅读quirksmode.org 上有关事件处理的文章。

于 2011-12-07T11:32:42.637 回答
0

除了onMouseOut 之外，还有andonMouseOver的概念。实际上我不知道它在不同的浏览器中如何。我使用 jQuery，它为我做了所有的事情。在此处阅读所有相关信息，并以一个很好的示例在页面底部使用不同事件时发生了什么。onMouseEnteronMouseLeaveimplemented

于 2011-12-07T11:39:54.540 回答