Solve the problem that the Mouse event of HTML elements is interfered by internal elements_html/css

Solve the problem that the Mouse event of HTML elements is interfered by internal elements_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:42:34

Original

1284 people have browsed it

There is a DIV element with a SPAN element inside it. In order to achieve some special effects, I need to use the onmouseover and onmouseout events of the DIV element. When testing, the following situation will be found:
When the mouse moves inside the DIV, The onmouseover event is triggered; then the mouse moves over the SPAN element inside the DIV. We will definitely not think that the mouse has moved outside the DIV at this time, but the strange thing is that the onmouseout event of the DIV element is triggered, and immediately after the DIV element onmouseover The event was also triggered immediately.
This is not what I want, so how to "shield" the interference of Javascript events caused by inner elements to outer elements?
Here are two methods:

1. setTimeout

Because after the mouse moves over the internal element and the onmouseout event of the outer element is triggered, the onmouseover event of the outer element will also be triggered immediately. , so we only need to delay the action that needs to be performed by the onmouseout event of the outer element for a short period of time, and then execute the clearTimeout method in the onmouseover event, so as to avoid event interference caused by internal elements.
Please see the figure below for the specific execution process (the vertical dotted line indicates time):

This is a very clever method, because when onmouseout is triggered, the substantive method is not executed immediately; It takes a little while. If the onmouseover event is triggered immediately again during this period, then it is basically certain that the onmouseout event is triggered due to interference from internal elements, so clearTimeout is used in the onmouseover event to prevent the delayed method execution.

2.contains

Add the following judgment to the method called onmouseover, and then execute the method body when the result is false:

if(this.contains(event.fromElement)){return;}

Copy after login

Also in the method called onmouseout Also add the following judgment, and then execute the method body when the result is false:

if(this.contains(event.toElement)){return;}

Copy after login

Let’s explain the meaning of the above two lines of code: In IE, all HTML elements have a contains method, which is used to determine whether the current element contains the specified element. We use this method to determine whether the event of the outer element is triggered because of the internal element. If the internal element causes unnecessary events to be triggered, then we ignore the event.

event.fromElement points to the element the mouse leaves when the onmouseover and onmouseout events are triggered; event.toElement points to the element the mouse enters when the onmouseover and onmouseout events are triggered.

Then the meanings of the above two lines of code are:
When the onmouseover event is triggered, determine whether the element the mouse leaves is an internal element of the current element. If so, ignore this event;
When the onmouseout event is triggered When, determine whether the element the mouse enters is an internal element of the current element. If so, ignore this event;
In this way, the internal elements will not interfere with the onmouseover and onmouseout events of the outer element.

But the problem comes again. Non-IE browsers do not support the contains function. However, since we already know the function of the contains function, we can add the following code to add 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;       };   }

Copy after login