Solution to the Javascript onmouseout Problem

Last Update:2018-12-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Solution 1:

I want to trigger an event processing function when the mouse leaves a DIV, so I use the onmouseout result, but I find that the trigger is too sensitive. The reason is that I haven't figured it out. It seems like I'm trying to differentiate mouseout from IE. fromelement or toelement, the onmouseleave event of IE 5.5 or more is relatively easy to use and partial FF does not support this event. You only have to find a way to manually judge it.

<SCRIPT>
/***
* Parameter e is the trigger event passed by the object. To access the event object, the event parameter must be passed.
* Parameter o is the target DIV object.
*/
Function fun (e, o ){
/* FF to determine whether the mouse leaves the DIV */
If (window. navigator. userAgent. indexOf ("Firefox")> = 1 ){
Var x = e. clientX + document. body. scrollLeft;
Var y = e. clientY + document. body. scrollTop;
Var left = o. offsetLeft;
Var top = o. offsetTop;
Var w = o. offsetWidth;
Var h = o. offsetHeight;

If (y <top | y> (h + top) | x> left + w | x <left ){
Alert ("mouseout ");
}
}

/* IE */
If (o. contains (event. toElement) = false)
Alert ("mouseout ");

}
</SCRIPT>

<DIV onmouseout = fun (event, this)> content </DIV>

Note that when you take the mouse value, you must add the content that has been dragged by the scroll bar E. clienty + document. body. scrolltop. clienty is an incorrect value. Of course, if the height and width are small, it cannot be seen. Take the height and width of an object can also use clientheight clientwidth attributes in the future when ff ie is not compatible to see more FF development manual http://developer.mozilla.org/en/docs/DOM:element.offsetLeft

Solution 2: (similar to solution 1)

Onmouseout of JS has a very strange problem. For example

</Div>

We expect that the onmouseout event will be triggered only when the mouse moves from the Div. However, in fact, when we move to the element in the DIV, such as the tag in this example, the onmousout event is triggered. That is to say, moving to the object's sub-object is also considered onmouseout. This will often make us unable to achieve the expected results. Today's work has encountered this problem. I searched on blueidea and found a solution. Compatible with IE and ff.

 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> production by Adam </title>
</Head>

<Body>
<SCRIPT type = "text/JavaScript">
Function Test (OBJ, e ){
If (E. currenttarget ){
If (E. relatedtarget! = OBJ ){
If (OBJ! = E. relatedtarget. parentnode ){
Alert (1 );
}
}
} Else {
If (E. toelement! = OBJ ){
If (OBJ! = E. toelement. parentnode ){
Alert (1 );
}
}
}
}
</SCRIPT>
<Div onmouseout = "test (this, event)" style = "width: 100px; Height: 100px; Border: 1px #666 solid">
<Span style = "margin: 5px; width: 100%; Height: 100%; Border: 1px # ff0000 solid"> faddsf </span>
</Div>
</Body>
</Html>

Today, we have found a good solution to this issue in JQ. haha, jquery defines an event called "mouseleave". Using this event as the event handle can solve this problem. jquery is a good thing.

Solution 3:

, Jquery v1.2.2 we recommend that you use bind ("mouseleave", function () {}) instead of the previous Mouseover method.
Use BIND ("mouseenter", function () {}) instead of mouseout, also for the previous hover method, to see the detailed description of this address: http://docs.jquery.com/Release:jQuery_1.2.2

$ (Document). Ready (function (){
$ ("# A1"). BIND ("mouseleave", function (){
$ ('<Div style = "color: red;"> out </div> ')
. Insertafter ($ (this ));
});
});

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Solution to the Javascript onmouseout Problem

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support