本文實例講述了js判斷滑鼠位置是否在某個p中的方法。分享給大家供大家參考,具體如下:
p的onmouseout事件讓p消失時,會出現這樣的情況,就是當滑鼠移至p中的其它內容時,此時也判定為離開p ,會觸發onmouseout事件,這樣p中的內容就不能操作了。解決的方法是當觸發onmouseout事件時,先判斷滑鼠是否在p內,如果在,說明鼠 標並沒有離開p,就不刪除p,否則,刪除之。 OK,現在問題解決了。
就是找到該p左上角和右下角座標,判斷滑鼠的座標是否在這一區域就可以了。
p.onmouseout=function(event){ var p = document.getElementById("test"); var x=event.clientX; var y=event.clientY; var px1 = p.offsetLeft; var py1 = p.offsetTop; var px2 = p.offsetLeft + p.offsetWidth; var py2 = p.offsetTop + p.offsetHeight; if( x < px1 || x > px2 || y < py1 || y > py2){ //如果离开,则执行。。 }
後面為一些常用屬性方便找:
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
判斷滑鼠位置是否在某個div中的方法_javascript技巧的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!