Detailed explanation of the use of mouseover and mouseout in javascript_javascript skills

This article does not really prevent the child elements of the event element from bubbling...

It just makes a judgment when the child element bubbles to the event element to determine whether the event should be triggered, oh...no, it should be whether to run the relevant operations in the event function...

First of all, you can click here: Occurrence of the problem

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

Solution 1:

Under IE, there are mouseenter and mouseleave events to replace mouseover and mouseout.

There are many opinions on the Internet that these two events are only supported by IE and not other browsers.

But the latest versions of Firefox and Google support mouseenter and mouseleave! ! ! ! !

In addition, the support range of IE is: [ie5, so we should not spray IE...

Tested with other browsers:

Mouseenter and mouseleave are not supported in Firefox/3.6.28. It is unknown which version of Firefox will support these two events...

It is not supported in Opera9.50 Alpha and Opera9.00 Beta. In fact, there is no need to test Opera now. The latest version of Opera is based on webkit kernel...

The lower version of Google has not been tested...

Of course, these old versions of browsers can basically be ignored, so this should be the best solution: use mouseenter and mouseleave events to replace mouseover and mouseout.

For examples of these two events, click here: mouseenter and mouseleave

Note: jquery also has mouseenter and mouseleave events, which are compatible with all browsers.

Solution 2:

The above method is not supported by older versions of Firefox and Google. If you want the greatest range of compatibility, you can continue to read below

We use var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement to obtain event-related elements. Then use the relationship between this event-related element and the event element (the included relationship) to determine whether to perform related event processing.

For the mouseout event, reltg is the node the mouse pointer enters when it leaves the target.

For the mouseover event, reltg is the node that the mouse pointer leaves when it moves to the target node.

In the mouseout event function of li, if reltg is the child element of li, we do not need to run the relevant operations. If reltg is the parent element of li, we will run the relevant operations.

We can judge the inclusion relationship between li and reltg through the following isMouseLeaveOrEnter function:

//判断事件相关元素与li的关系 如果事件相关元素为li的子元素就返回false 反之返回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)) {
　　　　//运行相关操作
　　};
}

The obvious disadvantage of this method is that all parent elements must be traversed in isMouseLeaveOrEnter, which is a performance issue

Solution three:

This method has the same idea as method two, except that we use compareDocumentPosition/contains to determine the containment relationship between li and reltg, which optimizes the performance issues caused by traversing all parent elements in method two.

Let’s look at the code directly:

//判断node是否为parent的子元素
//if node == parent 也会返回true
function contains(parent, node) {
　　if(parent.compareDocumentPosition){ //ff
　　　　var _flag = parent.compareDocumentPosition(node); 
　　　　return (_flag == 20 || _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 describing their position in the document.

The return value may be:

1: It doesn’t matter, the two nodes do not belong to the same document.

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

4: The first node (P1) is positioned in front of the second node (P2).

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

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

32: There is no relationship, or the two nodes are two attributes of the same element.

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

And [ie8- does not support the compareDocumentPosition() method. You need to use contains instead. The compareDocumentPosition() method is so powerful. It is used to determine whether nodeB is included in another nodeA: nodeA.contains( nodeB )

The above is the entire content of this article, I hope you all like it.