JavaScript prevents child elements from bubbling to trigger the parent element's mouseover, mouseout

This article does not really block the child elements of the event element bubbling, as the title says ...

Just when the child element bubbles to the event element, a judgment is made to determine whether to trigger the event, oh ... No, the related operation in the event function should be run ...

First you can poke here: the problem arises

Note: The Mouseover/out event in jquery also has this problem

Workaround One:

Under IE there are mouseenter and MouseLeave events to replace MouseOver and mouseout.

Many online statements, these two events only IE support, other browsers do not support.

But I have supported both MouseEnter and mouseleave!!!!! in the latest version of Firefox and Google.

In addition, IE is the scope of support is: [ie5+, so we still do not spray ie ...

Other browsers have tested the following:

In firefox/3.6.28 is not support MouseEnter and MouseLeave, Firefox specifically from which version to support these two events, it is unclear ...

Not supported in Opera9.50 Alpha and Opera9.00 beta. In fact, opera now completely can not test, the latest version of opera is the WebKit kernel ...

Google low version not tested ...

Of course, these old versions of the browser can basically be out of control, so this should be the best solution: with MouseEnter and MouseLeave event to replace MouseOver and mouseout.

The instance of this two event stamp this: MouseEnter and MouseLeave

Note: jquery also has MouseEnter and MouseLeave events that are compatible with all browsers.

Workaround Two:

The above method in the old version of Firefox and Google is not supported, if you want to get the maximum range of compatibility, then you can continue to look down

We use var RELTG = E.relatedtarget? E.relatedtarget:e.type = = ' Mouseout '? E.toelement:e.fromelement to get event-related elements. Through this event-related element it is associated with the event element (including the relationship), to determine whether to do related event processing.

For mouseout events, RELTG is the node that the mouse pointer enters when the mouse pointer leaves the target.

For mouseover events, RELTG is the node that leaves when the mouse pointer moves over the target node.

In the event function of Li's mouseout, if RELTG is a child of Li we do not run the related operation if RELTG is the parent element of Li.

We can use the following Ismouseleaveorenter function to determine the inclusion relationship between Li and RELTG:

//determine the relationship between event-related elements and Li if the event-related element is a child of Li, returns false and returns true insteadfunction Ismouseleaveorenter (e, handler) {if(E.type! ='mouseout'&& E.type! ='mouseover')return false; varRELTG = E.relatedtarget? E.relatedtarget:e.type = ='mouseout'?e.toelement:e.fromelement;  while(RELTG && RELTG! = handler) RELTG =Reltg.parentnode; return(RELTG! =handler);}; Li.onmouseout=function (e) {e= e| | Window.Event; if(Ismouseleaveorenter (E, This)) {//Run related actions};}

Look at the effect: Poke me

The obvious disadvantage of this method is that the ismouseleaveorenter to traverse all the parent elements, performance issues

Workaround Three:

This method is the same as the method two, but we here through the comparedocumentposition/contains to determine the relationship between Li and Reltg, optimized the method two times all the parent elements brought about by the performance problem.

Look directly at the code:

//Determine if node is a child of parent//if node = = Parent also returns Truefunction contains (parent, node) {if(parent.comparedocumentposition) {//FF 　　　　 var_flag =parent.comparedocumentposition (node); return(_flag = = -|| _flag = =0)?true:false; }Else if(Parent.contains) {//IE 　　　　 returnparent.contains (node); }}; Li.onmouseout=function (e) {e= e| | Window.Event; varRelatedele = E.relatedtarget? E.relatedtarget:e.type = ='mouseout'?e.toelement:e.fromelementif(!contains ( This, Relatedele)) {show.innerhtml=show.innerhtml+'0'; }}

Look at the effect: Poke me

The Comparedocumentposition () method compares two nodes and returns an integer that describes their position in the document.

The return value might be:

1: No relationship, two nodes are not part of the same document.

2: The first node (P1) is located after the second node (P2).

4: The first node (P1) is positioned before the second node (P2).

8: The first node (P1) is located in the second node (P2).

16: The second node (P2) is located within the first node (P1).

32: No relationship, or two nodes are two properties of the same element.

Note: The return value can be a combination of values. For example, returning 20 means that the P2 is inside P1 (16), and P1 before P2 (4).

While [ie8-does not support the Comparedocumentposition () method, it needs to use contains instead of the Comparedocumentposition () method so powerful that it is used to determine if NodeB is contained in another NodeA Medium: NodeA contains (NodeB)

JavaScript prevents child elements from bubbling to trigger the parent element's mouseover, mouseout