there is a DIV element, its inner span element, in order to achieve some special effects, I need to take advantage of the onmouseover and onmouseout events of the DIV element, and the following conditions will be found when testing:
when the mouse moves inside the Div, the onmouseover event is triggered, and then the mouse moves over the div inner span element, and we certainly don't think the mouse has moved to the outside of the div, but it's strange that the DIV element's onmouseout event is triggered, And immediately immediately after the div element onmouseover event is triggered.
This is not what I want, so how to "block" the internal elements to the outer element of the JavaScript incident caused by interference?
here are two ways to do this:
I. SetTimeoutSince the onmouseout event of the outer element is triggered when the mouse moves over the inner element, the onmouseover of the outer element is triggered immediately, so we only need to run the action that the onmouseout event of the outer element needs to be executed for a short period of time, The Cleartimeout method is then executed in the onmouseover event to avoid event interference caused by internal elements.
for the specific execution process see (vertical dashed lines indicate time):
This is a very ingenious method, because when the onmouseout trigger, the substantive method is not executed immediately, but it waits for a short period of time. If the onmouseover event is triggered immediately in this time, then it is almost certain that the onmouseout event is triggered because of internal element interference, so use cleartimeout in the onmouseover event to block the deferred method execution.
Two. Containsin the method called by onmouseover, add the following judgment, the result is false and then execute the method body:
if (This.contains (event.fromelement)) {return;}
Similarly, in the method called by onmouseout, the following judgment is added, and the result is a pseudo-execution method body:
if (This.contains (event.toelement)) {return;}
below to be triggered, then we ignore the event.
event.fromelement an element that points to the mouse leaving when triggering onmouseover and onmouseout events; event.toelement points to the element that the mouse enters when the onmouseover and onmouseout events are triggered.
the meaning of the above two lines of code is, respectively:
When the onmouseover event is triggered, the element that determines whether the mouse is left is the inner element of the current element, and if so, ignores this event;
When the onmouseout event is triggered, determines whether the element that the mouse enters is the inner element of the current element, and if so, ignores this event;
In this way, the inner elements do not interfere with the onmouseover and onmouseout events of the outer elements.
but again, the non-IE browser does not support the CONTAINS function, but since we already know the function of contains, we can add the following code to increase contains support for non-IE browsers:
if (typeof (HtmlElement)! = "undefined") { HTMLElement.prototype.contains = function (obj) {while (obj! = Null && typeof (Obj.tagname)! = "Undefind") { if (obj = = this) return true; OBJ = Obj.parentnode; } return false; }; }
Mouse events that resolve HTML elements are disturbed by internal elements
