In this article, we shall discuss how to avoid triggering unwanted “mouseout” events from child elements due to event bubbling. This maneuver can be achieved by listening to the following events instead of “hover”, or “mouseover” and “mouseout” events :
- onmouseenter: This event is triggered when the cursor/pointer moves onto an element. This event does not propagate upwards to parent elements hence it can be used in circumstances where event bubbling is eliminated.
- onmouseleave: This event is triggered when the cursor/pointer moves out of an element. On “mouseenter”, this event does not propagate up the document in the hierarchy.
JS Code: jQuery part of the implementation.
- How to download a CSV file in PHP that is triggered through a URL ?
- jQuery | mouseout() with Examples
- p5.js Element mouseOut() Method
- How to handle events in dynamically created elements in jQuery ?
- CSS | pointer-events Property
- What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?
- Node.js Events
- ES6 | Events
- How to bind 'touchstart' and 'click' events but not respond to both ?
- Difference between DOMContentLoaded and load Events
- AngularJS | Events
- Keyboard Events in ElectronJS
- jQuery Mouse Events
- How to use jQuery touch events plugin for mobiles ?
- SVG pointer-events Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.