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

div的onmouseout事件讓div消失時，會出現這樣的情況，就是當鼠標移至div中的其它內容時，此時也判定為離開div，會觸發 onmouseout事件，這樣div中的內容就不能操作了。解決的辦法是當觸發onmouseout事件時，先判斷鼠標是否在div內，如果在，說明鼠 標并沒有離開div，就不刪除div，否則，刪除之。OK,現在問題解決了。

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

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){

//如果離開，則執行。。

}

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

clientHeight???? 獲取對象的高度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。

clientLeft???? 獲取??? offsetLeft???? 屬性和客戶區域的實際左邊之間的距離。

clientTop???? 獲取??? offsetTop???? 屬性和客戶區域的實際頂端之間的距離。

clientWidth???? 獲取對象的寬度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。

offsetHeight???? 獲取對象相對于版面或由父坐標??? offsetParent???? 屬性指定的父坐標的高度。

offsetLeft???? 獲取對象相對于版面或由??? offsetParent???? 屬性指定的父坐標的計算左側位置。

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

offsetTop???? 獲取對象相對于版面或由??? offsetTop???? 屬性指定的父坐標的計算頂端位置。

offsetWidth???? 獲取對象相對于版面或由父坐標??? offsetParent???? 屬性指定的父坐標的寬度。

offsetX???? 設置或獲取鼠標指針位置相對于觸發事件的對象的??? x???? 坐標。

offsetY???? 設置或獲取鼠標指針位置相對于觸發事件的對象的??? y???? 坐標。

clientX,clientY?? 鼠標當前相對于網頁的位置，當鼠標位于頁面左上角時clientX=0, clientY=0

screenX, screenY是相對于用戶顯示器的位置

網頁可見區域寬： document.body.clientWidth

網頁可見區域高： document.body.clientHeight

網頁可見區域寬： document.body.offsetWidth??? (包括邊線的寬)

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

網頁正文全文寬： document.body.scrollWidth

網頁正文全文高： document.body.scrollHeight

網頁被卷去的高： document.body.scrollTop

網頁被卷去的左： document.body.scrollLeft

網頁正文部分上： window.screenTop

網頁正文部分左： window.screenLeft

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

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

屏幕可用工作區高度： window.screen.availHeight

屏幕可用工作區寬度：window.screen.availWidth

希望本文所述對大家JavaScript程序設計有所幫助。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。