Solves the problem of onmouseout event triggered by mouse passing through internal elements.

Solves the problem of onmouseout event triggered by mouse passing through internal elements.

Recently, when I made a JS effect, I found this problem:

When the mouse moves to the IMG inside the Div or other elements, the internal element Mouseover event is triggered. However, when you move the cursor to another internal element inside the DIV,

The first trigger is the mouseout event of the DIV, followed by the Mouseover event of the current element.

Baidu found some information on the Internet, and now I will summarize it:

Method 1: Set setTimeout

When the mouse triggers the outer mouseout event, start the timer setTimeout, and then execute the function to be executed after a period of time, to determine whether the mouse has moved to its internal elements.

When the mouse Mouseover is over an internal element, the Mouseover event itself and the outer layer will be triggered. In this case, cleartimeout is used in the event to eliminate the function to be executed after the specified out.

Example:
View plaincopy to clipboardprint?

1. var timeid; // global variable used for timing
2. Function Mouseover ()
3 .{
4. cleartimeout (timeid); // when the onmouseover event is triggered, the function that removes the mouse first.
5 .... // then process the function to be executed to trigger the Mouseover event
6 .}
7.
8. Function mouseout ()
9 .{
10. timeid = setTimeout ("outmethod ()", 100); // delay the function to be executed by mouseout. This time is used to determine whether the mouse moves to its internal elements.
11 .}

VaR timeid; // The global variable is used to time the function Mouseover () {cleartimeout (timeid); // when the onmouseover event is triggered, the mouse is cleared first. ... // Then process the function} function mouseout () {timeid = setTimeout ("outmethod ()", 100) that triggers the Mouseover event ); // delay the function to be executed by mouseout. This time is used to determine whether the mouse moves to its internal elements. }
Method 2: Use contains
Use contains to determine whether the mouse is out of its internal elements, that is, to determine whether the elements that move when the mouse is out belong to the internal elements of this element.

For example, after an event is triggered, the function is executed as follows:
View plaincopy to clipboardprint?

1. Function mouseout ()
2 .{
3. outmethod ();
4 .}

Function mouseout () {outmethod ();}
Now, before executing a function, you must first determine whether the mouse-moving element in this event is included in the function itself. If the mouse-moving element does not belong to this event, the following function is executed:
View plaincopy to clipboardprint?

1. Function mouseout ()
2 .{
3. If (! This. Contains (event. toelement ))
4 .{
5. outmethod ();
6 .}
7 .}

Function mouseout () {If (! This. Contains (event. toelement) {outmethod ();}}
However, this contains only supports ie. To enable non-ie support, the following code adds the contains function:
View plaincopy to clipboardprint?

1. If (typeof (htmlelement )! = "Undefined "){
2. htmlelement. Prototype. Contains = function (OBJ ){
3. While (OBJ! = NULL & typeof (obj. tagname )! = "Undefind "){
4. If (OBJ = This)
5. Return true;
6. OBJ = obj. parentnode;
7 .}
8. Return false;
9 .};
10 .}

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 ;};}
In fact, it is not a stop looking for the parent element of the element that the mouse moves to, to see if this parent element is the original place where the mouse stays.
If this element, his father or grandfather, is the element that the mouse has just started to output, it must be the internal element of the element that the mouse has come out.

Here, the blog "wolf asked the sky" is very detailed:
<A herf = "http://www.cnblogs.com/zhaoshun/archive/2009/01/16/1376998.html"> solve the mouse Event Interference of HTML internal elements (instance, compatible with FF, ie) </a>