The Show These events are special, because they have property For
For
In the example below each face and its features are separate elements. When you move the mouse, you can see mouse events in the text area. Each event has the information about both Result script.js style.css index.html
The That’s normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window. We should keep that possibility in mind when using The The browser checks the mouse position from time to time. And if it notices changes then triggers the events. That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped: If the mouse moves very fast from That’s good for performance, because there may be many intermediate elements. We don’t really want to process in and out of each one. On the other hand, we should keep in mind that the mouse pointer doesn’t “visit” all elements along the way. It can “jump”. In particular, it’s possible that the pointer jumps right inside the middle of the page from out of the window. In that case You can check it out “live” on a teststand below. Its HTML has two nested elements: the Also move the pointer into the child Result script.js style.css index.html If In case of fast mouse movements, intermediate elements may be ignored, but one thing we know for sure: if the pointer “officially” entered an element ( An important feature of If we’re on That may seem strange, but can be easily explained. According to the browser logic, the mouse cursor may be only over a single element at any time – the most nested one and top by z-index. So if it goes to another element (even a descendant), then it leaves the previous one. Please note another important detail of event processing. The You can see that very well in the example below: If you move the mouse from
Result script.js style.css index.html As shown, when the pointer moves from If we don’t examine But that’s not the case! The pointer is still over the parent, it just moved deeper into the child element. If there are some actions upon leaving the parent element, e.g. an animation runs in To avoid it, we can check Alternatively we can use other events: Events But there are two important differences:
These events are extremely simple. When the pointer enters an element – When the pointer leaves an element – This example is similar to the one above, but now the top element has As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored Result script.js style.css index.html Events Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells. The natural solution would be – to set the handler on Handlers for So, let’s use Let’s start with simple handlers that highlight the element under mouse: Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted: Result script.js style.css index.html In our case we’d like to handle transitions between table cells Here’s what we can do:
Here’s an example of code that accounts for all possible situations: Once again, the important features are:
Here’s the full example with all details: Result script.js style.css index.html Try to move the cursor in and out of table cells and inside them. Fast or slow – doesn’t matter. Only We covered events These things are good to note:
Events Events |
Cara menggunakan javascript follow mouse effect
Pos Terkait
Copyright © 2024 apacode Inc.
