For example, in Flipkart, so many product items are there. ![]() In a real-time scenario, space plays a vital role in dealing with items.That’s the element that we are coming from/to, complementary to target. Events mouseover/out and mouseenter/leave have an additional property: relatedTarget.A fast mouse move may skip intermediate elements.We covered events mouseover, mouseout, mousemove, mouseenter and mouseleave. Only as a whole is highlighted, unlike the example before. Try to move the cursor in and out of table cells and inside them. any functions to handle entering/leaving an element RelatedTarget = relatedTarget.parentNode then that's an internal transition – ignore it go up the parent chain and check – if we're still inside currentElem we're leaving the element – where to? Maybe to a descendant? that's probably a move inside the table, but out of , if we're outside of any now, then ignore the event moved into, but outside of our table (possible in case of nested tables) that's a mouseover inside it, ignore the event if currentElem is set, we didn't leave the previous , before entering a new element, the mouse always leaves the previous one Here’s an example of code that accounts for all possible situations: On mouseout – ignore if we didn’t leave the current.On mouseover – ignore the event if we’re still inside the current.Remember the currently highlighted in a variable, let’s call it currentElem.Other transitions, such as inside the cell or outside of any cells, don’t interest us. In our case we’d like to handle transitions between table cells : entering a cell and leaving it. Let’s start with simple handlers that highlight the element under mouse:īagua Chart: Direction, Element, Color, Meaning It’s impossible to get any information about transitions inside it. Handlers for mouseenter/leave on only trigger when the pointer enters/leaves the table as a whole. So if such event happens on, then only a handler on that is able to catch it. The natural solution would be – to set the handler on and process events there. 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |