Speaking of having a DIV element, there is an IMG element and a SPAN element inside, don't worry about how these two internal elements are laid out, this is not the point I want to discuss.
To achieve some special effects, I need to use TD's onmouseover and onmouseout events, and when I test it, I will find the following situation:
When the mouse moves inside the DIV, the onmouseover event is triggered; Then move the mouse to the IMG or SPAN element inside the DIV, we definitely don't think that the mouse has moved to the outside of the DIV, but the strange thing is that the onmouseout event is triggered, and the onmouseover event is also triggered immediately.
This is not what I want, so how can I "block" the interference of Javascrip{filtering}t events brought by internal elements to external elements?
Here are two methods:
1. setTimeout
Because after the mouse moves over the inner element and triggers the onmouseout event of the outer element, the onmouseover of the outer element will also be triggered immediately, so we only need to delay the action that the onmouseout event of the outer element needs to execute for a short period of time to run, and then execute the clearTimeout method in the onmouseover event, so as to avoid the event interference caused by the internal element.
Please see the following figure for the specific execution process (vertical dotted line represents time):
This is a clever approach, because when onmouseout is triggered, the substantive method is not executed immediately, but waits for a short period of time. If the onmouseover event is triggered immediately during this time, then it is basically certain that the onmouseout event is triggered because of interference from internal elements, so use clearTimeout in the onmouseover event to prevent the delayed method from executing.
2. contains
Make the following judgment when onmouseover, and then execute the method body when the result is true:
Make the following judgment when onmouseout, and then execute the method body when the result is true:
Here's an explanation of the meaning of the above two lines of code:
In IE, all HTML elements have a contain method that determines whether the current element contains a specified element. We use this method to determine whether an event of an outer element is triggered by an internal element, and if an internal element causes an unwanted event to be triggered, then we ignore this event.
event.fromElement points to the element where the mouse leaves when the onmouseover and onmouseout events are triggered; event.toElement points to the element that the mouse enters when the onmouseover and onmouseout events are triggered.
So the meaning of the above two lines of code is:
- When the onmouseover event is triggered, it determines whether the element left by the mouse is an internal element of the current element, and if so, ignores this event;
- When the onmouseout event is triggered, judge whether the element entered by the mouse is an internal element of the current element, and if so, ignore this event;
This way, the inner element does not interfere with the onmouseover and onmouseout events of the outer element.
But the problem is again, non-IE browsers do not support the contain function, but now that we know the function of the contain function, we can add the following code to add the following code to add contain support for non-IE browsers:
The above methods are not compatible with Firefox:
The point is jQuery:
jQueryUse mouseleave instead of mouseout, so that what is said above does not happen.
Also, the mouseover will be triggered repeatedly, just use mouseenter instead.
Perfect solution~
|
Posted on 12/17/2018 2:57:53 PM
|
|
|
|
