本文實(shí)例講述了js判斷鼠標(biāo)位置是否在某個(gè)div中的方法。分享給大家供大家參考，具體如下：

div的onmouseout事件讓div消失時(shí)，會(huì)出現(xiàn)這樣的情況，就是當(dāng)鼠標(biāo)移至div中的其它內(nèi)容時(shí)，此時(shí)也判定為離開div，會(huì)觸發(fā) onmouseout事件，這樣div中的內(nèi)容就不能操作了。解決的辦法是當(dāng)觸發(fā)onmouseout事件時(shí)，先判斷鼠標(biāo)是否在div內(nèi)，如果在，說明鼠 標(biāo)并沒有離開div，就不刪除div，否則，刪除之。OK,現(xiàn)在問題解決了。

就是找到該div左上角和右下角坐標(biāo)，判斷鼠標(biāo)的坐標(biāo)是否在這一區(qū)域就可以了。

div.οnmοuseοut=function(event){

var div = document.getElementById("test");

var x=event.clientX;

var y=event.clientY;

var divx1 = div.offsetLeft;

var divy1 = div.offsetTop;

var divx2 = div.offsetLeft + div.offsetWidth;

var divy2 = div.offsetTop + div.offsetHeight;

if( x < divx1 || x > divx2 || y < divy1 || y > divy2){

//如果離開，則執(zhí)行。。

}

后面為一些常用屬性方便查找：

clientHeight???? 獲取對(duì)象的高度，不計(jì)算任何邊距、邊框、滾動(dòng)條，但包括該對(duì)象的補(bǔ)白。

clientLeft???? 獲取??? offsetLeft???? 屬性和客戶區(qū)域的實(shí)際左邊之間的距離。

clientTop???? 獲取??? offsetTop???? 屬性和客戶區(qū)域的實(shí)際頂端之間的距離。

clientWidth???? 獲取對(duì)象的寬度，不計(jì)算任何邊距、邊框、滾動(dòng)條，但包括該對(duì)象的補(bǔ)白。

offsetHeight???? 獲取對(duì)象相對(duì)于版面或由父坐標(biāo)??? offsetParent???? 屬性指定的父坐標(biāo)的高度。

offsetLeft???? 獲取對(duì)象相對(duì)于版面或由??? offsetParent???? 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置。

offsetParent???? 獲取定義對(duì)象??? offsetTop???? 和??? offsetLeft???? 屬性的容器對(duì)象的引用。

offsetTop???? 獲取對(duì)象相對(duì)于版面或由??? offsetTop???? 屬性指定的父坐標(biāo)的計(jì)算頂端位置。

offsetWidth???? 獲取對(duì)象相對(duì)于版面或由父坐標(biāo)??? offsetParent???? 屬性指定的父坐標(biāo)的寬度。

offsetX???? 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的??? x???? 坐標(biāo)。

offsetY???? 設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的??? y???? 坐標(biāo)。

clientX,clientY?? 鼠標(biāo)當(dāng)前相對(duì)于網(wǎng)頁的位置，當(dāng)鼠標(biāo)位于頁面左上角時(shí)clientX=0, clientY=0

screenX, screenY是相對(duì)于用戶顯示器的位置

網(wǎng)頁可見區(qū)域?qū)?#xff1a; document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)?#xff1a; document.body.offsetWidth??? (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight?? (包括邊線的寬)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html判断坐标,js判断鼠标位置是否在某个div中的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。