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:
if(this.contains(event.fromElement)){return;}
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;}
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: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; }; }