How to Use mouseover and mouseout in javascript _ javascript tips-js tutorial

This article mainly introduces details about the use of mouseover and mouseout in javascript. If you need more information, refer to this article, the sub-element that really blocks event elements bubbles...

When the child element is bubbling to the event element, a judgment is made to determine whether to trigger the event. Oh, no. It should be whether to run the relevant operations in the event function...

First, you can press here: the problem occurs.

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

Solution 1:

In ie, there are mouseenter and mouseleave events to replace mouseover and mouseout.

There are many sayings on the Internet that these two events are only supported by ie, but not by other browsers.

However, Firefox and Google in the latest version support mouseenter and mouseleave !!!!!

In addition, the supported range of ie is: [ie5 +, so we should stop spraying ie...

Other browsers have tested the following:

In Firefox/3.6.28, mouseenter and mouseleave are not supported. It is unknown from which version of Firefox supports these two events...

Neither Opera9.50 Alpha nor Opera9.00 Beta is supported. In fact, Opera can be completely tested now. The latest versions of Opera are all webkit kernels...

Google earlier versions not tested...

Of course, these old browsers can be left empty, so this should be the best solution: Use the mouseenter and mouseleave events to replace mouseover and mouseout.

The instance stamp of this event: mouseenter and mouseleave

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

Solution 2:

The above method is not supported by Firefox and Google in the old version. If you want to achieve maximum compatibility, you can continue to look at it.

We use var reltg = e. relatedTarget? E. relatedTarget: e. type = 'mouseout '? E. toElement: e. fromElement to obtain event-related elements. Then, the relationship between the Event-related elements and the event elements (including the relationship) is used to determine whether to handle the event.

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

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

In the mouseout event function of li, if reltg is a child element of li, we should not run related operations. If reltg is a parent element of li, we will run related operations.

We can use the isMouseLeaveOrEnter function below to determine the inclusion relationship between li and reltg:

// Determine the relationship between event-related elements and li. if the child element of Event-related elements is li, false is returned. Otherwise, truefunction 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 method is that isMouseLeaveOrEnter needs to traverse all parent elements, which causes performance problems.

Solution 3:

This method is the same as method 2, but here we use compareDocumentPosition/contains to determine the inclusion relationship between li and reltg, and optimize the performance problems caused by traversing all parent elements in method 2.

Check the Code directly:

// Determine whether the node is a child element of parent. // if node = parent, truefunction 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 positions in the document.

The returned value may be:

1: it does not matter. The two nodes do not belong to the same document.

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

4: The first vertex (P1) is located before the second vertex (P2.

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

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

32: it does not matter, or two nodes are two attributes of the same element.

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

[Ie8-does not support the compareDocumentPosition () method. It is so powerful to replace the compareDocumentPosition () method with contains. It is used to determine whether nodeB is included in another nodeA: nodeA. contains (nodeB)

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