js判斷鼠標(biāo)位置是否在某個(gè)div中的方法
本文實(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),如果在,說(shuō)明鼠 標(biāo)并沒(mé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){
//如果離開,則執(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)頁(yè)的位置,當(dāng)鼠標(biāo)位于頁(yè)面左上角時(shí)clientX=0, clientY=0
screenX, screenY是相對(duì)于用戶顯示器的位置
網(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 (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.offsetHeight (包括邊線的寬)
網(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)容感興趣的讀者可查看本站專題:《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS鼠標(biāo)事件大全 推薦收藏
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- js 鼠標(biāo)點(diǎn)擊事件及其它捕獲
- js改變鼠標(biāo)的形狀和樣式的方法
- javascript 鼠標(biāo)事件總結(jié)
- javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼
- js中鼠標(biāo)滾輪事件詳解(firefox多瀏覽器)
- JS實(shí)現(xiàn)超級(jí)好看的鼠標(biāo)小尾巴特效
相關(guān)文章
JS函數(shù)參數(shù)的傳遞與同名參數(shù)實(shí)例分析
這篇文章主要介紹了JS函數(shù)參數(shù)的傳遞與同名參數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)參數(shù)的傳遞與同名參數(shù)相關(guān)原理、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
js利用for in循環(huán)獲取 一個(gè)對(duì)象的所有屬性以及值的實(shí)例
下面小編就為大家?guī)?lái)一篇js利用for in循環(huán)獲取 一個(gè)對(duì)象的所有屬性以及值的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Jquery Autocomplete 結(jié)合asp.net使用要點(diǎn)
Jquery的Autocomplete是一個(gè)很好的智能提示插件,但是在實(shí)際使用過(guò)程中還是會(huì)遇到一些小問(wèn)題.2010-10-10
JavaScript從數(shù)組的indexOf()深入之Object的Property機(jī)制
這篇文章主要介紹了JavaScript從數(shù)組的indexOf()深入——Object的Property機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-05-05
輕松解決JavaScript定時(shí)器越走越快的問(wèn)題
這篇文章主要介紹了輕松解決JavaScript定時(shí)器越走越快的問(wèn)題 ,本文通過(guò)實(shí)例帶給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
JavaScript實(shí)現(xiàn)斗地主游戲的思路
這篇文章主要介紹了JavaScript實(shí)現(xiàn)斗地主游戲的思路的相關(guān)資料,需要的朋友可以參考下2016-02-02

