CODEWITHSUNDEEP
javascriptdom-events
Jefter Rocha
Jefter Rocha

Reputation: 407

onMouseEnter event doesn't work when dragging elements

onMouseEnter event does not work right when mouse is dragging some element (like links and images). You can check this below:

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://stackoverflow.com">drag this on top of the items below</a>
<ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
</ul>

Upvotes: 2

Views: 958

Answers (3)

John Griffiths
John Griffiths

Reputation: 3433

As you are intentionally dragging the anchor over the list item you should be using the drag and drop API.

Document dragover event

Stackoverflow says "Links to jsfiddle.net must be accompanied by code" So you will have to visit the MDN page for jsfiddle example

Upvotes: 0

Sifat Haque
Sifat Haque

Reputation: 6067

Actually what you need is dragenter event. Please check this example.

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://stackoverflow.com">drag this on top of the items below</a>
<ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
</ul>

Upvotes: 4

rcbxd
rcbxd

Reputation: 122

try onmousedown instead of onmouseenter

Upvotes: -1

Related Questions