快捷導(dǎo)航

js判斷鼠標(biāo)位置是否在某個(gè)div中的方法

更新時(shí)間：2016年02月26日 10:19:29 作者：小壞

這篇文章主要介紹了js判斷鼠標(biāo)位置是否在某個(gè)div中的方法,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性操作相關(guān)技巧,需要的朋友可以參考下

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

div的onmouseout事件讓div消失時(shí)，會(huì)出現(xiàn)這樣的情況，就是當(dāng)鼠標(biāo)移至div中的其它內(nèi)容時(shí)，此時(shí)也判定為離開(kāi)div，會(huì)觸發(fā) onmouseout事件，這樣div中的內(nèi)容就不能操作了。解決的辦法是當(dāng)觸發(fā)onmouseout事件時(shí)，先判斷鼠標(biāo)是否在div內(nèi)，如果在，說(shuō)明鼠標(biāo)并沒(méi)有離開(kāi)div，就不刪除div，否則，刪除之。OK,現(xiàn)在問(wèn)題解決了。
就是找到該div左上角和右下角坐標(biāo)，判斷鼠標(biāo)的坐標(biāo)是否在這一區(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){
    //如果離開(kāi)，則執(zhí)行。。
}

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

clientHeight     獲取對(duì)象的高度，不計(jì)算任何邊距、邊框、滾動(dòng)條，但包括該對(duì)象的補(bǔ)白。
clientLeft     獲取    offsetLeft     屬性和客戶(hù)區(qū)域的實(shí)際左邊之間的距離。
clientTop     獲取    offsetTop     屬性和客戶(hù)區(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)頁(yè)的位置，當(dāng)鼠標(biāo)位于頁(yè)面左上角時(shí)clientX=0, clientY=0
screenX, screenY是相對(duì)于用戶(hù)顯示器的位置

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線(xiàn)的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線(xiàn)的寬)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章: