transitionend is an event that fires when a CSS transition is complete. This event is triggered whenever a transition applied to an element is completed. Due to the bubbling nature of this event, the event may propagate to parent elements.
Event bubbling is the propagation of events along the DOM hierarchy in the direction of parent elements. For this reason, it is sometimes desirable to handle events at a particular child element while preventing propagation at the parent element.
The following code is an example of how to stop bubbling of transitionend events:
$('.main-image img').on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
e.stopPropagation();
});This code uses jQuery’s on method. It also specifies multiple event names to accommodate each browser’s vendor prefix. Then, e.stopPropagation() is used to stop event bubbling.
This method allows us to prevent event propagation on the parent element while maintaining processing of transitionend events on the child elements.
“,
“excerpt”: “This section explains the phenomenon of CSS transitionend events bubbling to parent elements and how to stop it.