JavaScript mouseover, mouseout using the detailed _javascript tips

This article does not, as the title says, really prevent bubbles in the child elements of the event element ...

Just when the child element bubbles to the event element to make a judgment to determine whether to trigger the event, oh ... No, it should be whether you want to run the relevant action in the event function ...

First you can poke a jab 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 of the online statements, the two events only IE support, other browsers do not support.

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

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

Other browsers 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 not known ...

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

Google has not tested the low version ...

Of course, these old versions of the browser can not be used, so this should be the best solution: use MouseEnter and MouseLeave events to replace MouseOver and mouseout.

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

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

Workaround Two:

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

We use var RELTG = E.relatedtarget? E.relatedtarget:e.type = ' mouseout '? E.toelement:e.fromelement to get the event-related elements. This event-related element is then used to determine whether or not to do relevant event handling, in relation to the event element (including the relationship).

For the Mouseout event, 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 Li's Mouseout event function, if RELTG is a child element of Li, we do not run related operations, if RELTG is the parent element of Li to run the related operation.

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

To judge the relationship between event-related elements and Li if the event-related element is a child of Li and returns false, it returns true
function Ismouseleaveorenter (e, handler) { 
if (e.type!= ')　　Mouseout ' && e.type!= ' MouseOver ') return false; 
var RELTG = 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 Operations
};
}

The obvious disadvantage of this approach is that the ismouseleaveorenter has to traverse all the parent elements, and the performance problem

Workaround Three:

This method and method two actually thinking is the same, but we here through Comparedocumentposition/contains to Judge Li and reltg of the inclusion relationship, optimize the method two times all the parent elements of performance problems.

Just look at the code:

A child element that determines whether node is parent
//if node = parent also returns a true
function contains (parent, node) {
if (　　　　parent.comparedocumentposition) {//ff
var _flag = parent.comparedocumentposition (node); 
return (_flag = = | | _flag = 0)?　　True:false; 
}else if (parent.contains) {//ie return
parent.contains (node);
}
};

Li.onmouseout = function (e) {
e = e| |　　window.event;
var Relatedele = E.relatedtarget? E.relatedtarget:e.type = ' mouseout '?　　E.toelement:e.fromelement
if (!contains (this, relatedele)) {
show.innerhtml=show.innerhtml+ ' 0 ';
}

}

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

The return value may be:

1: No relationship, two nodes do not belong to 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 in the first node (P1).

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

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

And [ie8-does not support the Comparedocumentposition () method, you need to use contains instead of the Comparedocumentposition () method so powerful, it is used to determine whether the NodeB is included in another NodeA Middle: NodeA contains (NodeB)

The above mentioned is the entire content of this article, I hope you can enjoy.