拖动元素时 onMouseEnter 事件不起作用

Question

onMouseEnter 当鼠标拖动某些元素（如链接和图像）时，事件无法正常工作。您可以在下面查看：

document.querySelectorAll("ul li").forEach(button => {
    button.addEventListener("mouseenter", e => {
        alert("mouseenter")
    });
});

a {
    margin-left: 2rem;
}

ul {
    list-style: none;
    margin-top: 2rem;
}

ul li {
    width: 20rem;
    color: #FFF;
    background-color: #909090;
    margin-bottom: 1rem;
    padding: 5px;
}

<a href="https://whosebug.com">drag this on top of the items below</a>
<ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
</ul>

Answer 1

尝试 onmousedown 而不是 onmouseenter

Answer 2

其实你需要的是dragenter事件。请检查此示例。

document.querySelectorAll("ul li").forEach(li => {
    li.addEventListener("dragenter", e => {
        console.log("mouseenter", e.target)
    });
});

a {
    margin-left: 2rem;
}

ul {
    list-style: none;
    margin-top: 2rem;
}

ul li {
    width: 20rem;
    color: #FFF;
    background-color: #909090;
    margin-bottom: 1rem;
    padding: 5px;
}

<a class='link' href="https://whosebug.com">drag this on top of the items below</a>
<ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
</ul>

Answer 3

当您有意将锚点拖到列表项上时，您应该使用拖放 API。

Document dragover event

Whosebug 说“jsfiddle.net 的链接必须附有代码” 因此，您必须访问 MDN 页面以获取 jsfiddle 示例

拖动元素时 onMouseEnter 事件不起作用

onMouseEnter event doesn't work when dragging elements

javascript

dom-events