How to tell if the mouse is within the DIV area

Source: Internet
Author: User

A mouseover,mouseout is used to trigger an event to determine whether the mouse is in the area. But the limitation of this approach is that you have to trigger mouseover, or Mouseout,mouseleave events to know

Today studied this question, also popularized the knowledge.

Method One:

A mouseover,mouseout is used to trigger an event to determine whether the mouse is in the area. But the limitation of this approach is that you have to trigger mouseover, or Mouseout,mouseleave events to know.


The code is as follows:

function Chkin ()
{
Div_1.innertext = "Now you move the mouse into the layer!" ";
Div_1.style.font = "normal Black";
}
function Chkout ()
{
Div_1.innertext = "Now you move the mouse out of the layer!" ";
Div_1.style.font = "Bold Red";
}

The code is as follows:

<div id= "div_1" style= "background-color:lightblue; width:400px; height:300px; "
Onmouseover= "Chkin ()" onmouseout= "Chkout ()" >this is a DIV
</div>

Method Two:

The code is as follows:

function   CheckIn (e) {
var   x=window.event.clientx;
var   y= Window.event.clientY;
var   str= ';
for (I=0;i <document.body.children.length;i++) {
             var   Obj=document.body.children[i];
          if (x> obj.offsetleft
                                    &&x < (obj.offsetleft+ Obj.clientwidth)
                           &&y> obj.offsettop
                          &&y < (obj.offsettop+obj.clientheight)) {
                 str+= ' < Mouse is located within the layer ' +obj.id+ ' range > n ';
         }else{
                 str+= ' < mouse is outside the layer ' +obj.id+ ' range > n ';
       }
 }
Alert (str);
}
Document.onclick=checkin

Method Three:

This method is the simplest and practical.

The code is as follows:
if (Mydiv.contains (window.event.srcElement))

That is, if (Mydiv.contains (element object of the mouse position))

The specific situation or according to their own needs to choose, I was debugging a way to three, but the specific also did not use. Other methods to continue the study.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.