Imagine we want to handle mouse enter/leave for table cells. So we can’t use event delegation with them. Transitions between descendants are ignoredĮvents mouseenter/leave are very simple and easy to use. Nothing happens when the pointer goes to the child and back. This example is similar to the one above, but now the top element has mouseenter/mouseleave instead of mouseover/mouseout.Īs you can see, the only generated events are the ones related to moving the pointer in and out of the top element. When the pointer leaves an element – mouseleave triggers. The exact location of the pointer inside the element or its descendants doesn’t matter. When the pointer enters an element – mouseenter triggers. Events mouseenter/mouseleave do not bubble.Transitions inside the element, to/from descendants, are not counted.They trigger when the mouse pointer enters/leaves the element. Events mouseenter and mouseleaveĮvents mouseenter/mouseleave are like mouseover/mouseout. To avoid it, we can check relatedTarget in the handler and, if the mouse is still inside the element, then ignore such event.Īlternatively we can use other events: mouseenter and mouseleave, that we’ll be covering now, as they don’t have such problems.
an animation runs in parent.onmouseout, we usually don’t want it when the pointer just goes deeper into #parent. If there are some actions upon leaving the parent element, e.g. If we don’t examine event.target inside the handlers, then it may seem that the mouse pointer left #parent element, and then immediately came back over it.īut that’s not the case! The pointer is still over the parent, it just moved deeper into the child element. * event.target: child element (bubbled) */
0 kommentar(er)
