如何判斷鼠標(biāo)是否在DIV的區(qū)域內(nèi)

2019-11-20 21:43:11

字體：大中小

供稿：網(wǎng)友

今天研究了一下這個(gè)問(wèn)題，也普及了一下知識(shí)吧。

方法一：

通過(guò)mouseover，mouseout來(lái)觸發(fā)事件，才判斷鼠標(biāo)是否在該區(qū)域。但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道。

復(fù)制代碼代碼如下:

function chkIn()
    {
  div_1.innerText = "現(xiàn)在你把鼠標(biāo)移入層了！";
  div_1.style.font = "normal black";
 }
   function chkOut()
    {
  div_1.innerText = "現(xiàn)在你把鼠標(biāo)移出層了！";
  div_1.style.font = "bold red";
 }

復(fù)制代碼代碼如下:

<div id="div_1" style="background-color:lightblue; width:400px; height:300px; " 
       onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV
  </div>

方法二：

復(fù)制代碼代碼如下:

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+= ' <鼠標(biāo)位于層 '+obj.id+ '范圍之內(nèi)> /n ';
          }else{
                str+= ' <鼠標(biāo)位于層 '+obj.id+ '范圍之外> /n ';
        }
  }
alert(str);
}
document.onclick=checkIn 