How to determine whether the mouse is within the area of a DIV

How to determine whether the mouse is within the area of a DIV_javascript skills

WBOY

Release： 2016-05-16 17:15:50

Original

1844 people have browsed it

I studied this issue today and spread some knowledge.

Method 1:

Trigger events through mouseover and mouseout to determine whether the mouse is in the area. But the limitation of this method is that the mouseover, or mouseout, or mouseleave events must be triggered to know.

Copy code 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";
 }

Copy the code The code is as follows:

onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV

Method 2:

Copy code The code is as follows:

function checkIn(e){
var x=window.event.clientX;
var y=window.event.clientY;
var str= ' ';
for(i=0;i  var obj=document.body.children[i];
 if(x> obj.offsetLeft
 .clientWidth)
                                                                                 offsetTop
                                                                                                                                                                                                                                         🎜> str = '  n '; 🎜>



Method 3: 




This method is the simplest and most practical. 

Copy code The code is as follows:

if(myDiv.contains(window.event.srcElement) )i.e. if(myDiv.contains(element object at mouse position)) The specific situation still depends on your own needs. I debugged method three, but I didn’t use it specifically. Other methods are still under research.

How to determine whether the mouse is within the area of ​​a DIV_javascript skills

How to determine whether the mouse is within the area of a DIV_javascript skills