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

div的onmouseout事件讓div消失時，會出現(xiàn)這樣的情況，就是當鼠標移至div中的其它內容時，此時也判定為離開div，會觸發(fā) onmouseout事件，這樣div中的內容就不能操作了。解決的辦法是當觸發(fā)onmouseout事件時，先判斷鼠標是否在div內，如果在，說明鼠 標并沒有離開div，就不刪除div，否則，刪除之。OK,現(xiàn)在問題解決了。
就是找到該div左上角和右下角坐標，判斷鼠標的坐標是否在這一區(qū)域就可以了。

div.onmouseout=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     獲取對象的高度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。
clientLeft     獲取    offsetLeft     屬性和客戶區(qū)域的實際左邊之間的距離。
clientTop     獲取    offsetTop     屬性和客戶區(qū)域的實際頂端之間的距離。
clientWidth     獲取對象的寬度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。
offsetHeight     獲取對象相對于版面或由父坐標    offsetParent     屬性指定的父坐標的高度。
offsetLeft     獲取對象相對于版面或由    offsetParent     屬性指定的父坐標的計算左側位置。
offsetParent     獲取定義對象    offsetTop     和    offsetLeft     屬性的容器對象的引用。
offsetTop     獲取對象相對于版面或由    offsetTop     屬性指定的父坐標的計算頂端位置。
offsetWidth     獲取對象相對于版面或由父坐標    offsetParent     屬性指定的父坐標的寬度。
offsetX     設置或獲取鼠標指針位置相對于觸發(fā)事件的對象的    x     坐標。
offsetY     設置或獲取鼠標指針位置相對于觸發(fā)事件的對象的    y     坐標。
clientX,clientY   鼠標當前相對于網頁的位置，當鼠標位于頁面左上角時clientX=0, clientY=0
screenX, screenY是相對于用戶顯示器的位置

網頁可見區(qū)域寬： document.body.clientWidth
網頁可見區(qū)域高： document.body.clientHeight
網頁可見區(qū)域寬： document.body.offsetWidth    (包括邊線的寬)
網頁可見區(qū)域高： 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
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

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

最新評論