在 div 上更改鼠标指针位置时出现多个 mouseover-mouseout 事件

Question

我在我的网络项目中进行了故障排除。我有一个 html 代码。如下所示：

<div id="my-div">
        <ul>
            <li>aaaaaaaa</li>
            <li>bbbbbbbb</li>
            <li>cccccccc</li>
            <li>dddddddd</li>
        </ul>
    </div>

但是当我在 div 中更改鼠标位置时，鼠标悬停功能会多次工作。我准备了一个 jsfiddle 示例来解释我的问题。 link 如下。

http://jsfiddle.net/r7zhL0qa/2/

请帮我解决这个问题。非常感谢您的回复。

Answer 1

发生此错误是因为您正在使用 "mouseover" 和 "mouseout"。这些事件不仅会为您附加的元素触发，还会为其子元素触发。因此，每当您移入和移出列表中的任何 LI 时，您都会看到事件触发。

您想要用作 "mouseenter" 和 "mouseleave" 的事件，它们只会对 "my-div" 而不是其子项触发。这是使用这些事件修改后的代码段版本。

var myDiv = document.getElementById('my-div'),
    counter = document.getElementById('counter');

myDiv.addEventListener("mouseenter", function () {
    counter.innerHTML += 'in <br>';
});

myDiv.addEventListener("mouseleave", function () {
    counter.innerHTML += 'out <br>';
});

<div id="my-div">
    <ul>
        <li>aaaaaaaa</li>
        <li>bbbbbbbb</li>
        <li>cccccccc</li>
        <li>dddddddd</li>
    </ul>
</div>
<div id="counter" style="height: 500px"></div>

(jsfiddle of the exact same code)

在 div 上更改鼠标指针位置时出现多个 mouseover-mouseout 事件

multiple mouseover-mouseout event when changing mouse pointer position on a div

javascript

css

hover

mouseover

space