Question

我在我的网络项目中遇到了问题。我有一个HTML代码。它看起来如下：

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

但是当我在div中更改鼠标位置时，鼠标悬停功能会多次运行。我准备了一个jsfiddle示例来解释我的问题是什么样的。链接如下。

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

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

Answer 1

发生此错误是因为您正在使用＆＃34; mouseover＆＃34;和＃34; mouseout＆＃34;。这些事件不仅会触发您附加它们的元素，也会触发它的子元素。因此，每当您进出列表中的任何LI时，您都会看到事件触发。

您想要使用的事件＆＃34; mouseenter＆＃34;和＆＃34; mouseleave＆＃34;，这只会触发＆＃34; my-div＆＃34;而不是为了它的孩子。这是使用这些事件的代码段的修改版本。

＆＃13;

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>';
});

＆＃13;

<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>

＆＃13;

（jsfiddle of the exact same code）

在div上更改鼠标指针位置时发生多次mouseover-mouseout事件

1 个答案: