Sometimes, we want to HTML5 fix dragleave event firing when hovering a child element with JavaScript.
In this article, we’ll look at how to HTML5 fix dragleave event firing when hovering a child element with JavaScript.
How to HTML5 fix dragleave event firing when hovering a child element with JavaScript?
To HTML5 fix dragleave event firing when hovering a child element with JavaScript, we call addEventListener with false.
For instance, we write
const dropZone = document.getElementById("box");
const dropMask = document.getElementById("drop-mask");
dropZone.addEventListener("dragover", dragOver, false);
dropMask.addEventListener("dragleave", dragLeave, false);
dropMask.addEventListener("drop", dragDrop, false);
to select the drop zone element with
const dropZone = document.getElementById("box");
We select the draggable element with
const dropMask = document.getElementById("drop-mask");
Then we call addEventListener with false to disable event capturing which propagates events from the ancestors element to the originating element.
Then the dragleave event won’t be fired when hovering a child element.
Conclusion
To HTML5 fix dragleave event firing when hovering a child element with JavaScript, we call addEventListener with false.
