How to tell if the mouse is within the DIV area

Source: Internet
Author: User
Tags range

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.