php中怎么判断鼠标事件,JavaScript_js判断鼠标位置是否在某个div中的方法，本文实例讲述了js判断鼠标位 - phpStudy...

js判断鼠标位置是否在某个div中的方法

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。相关阅读:

jQuery实现的选择商品飞入文本框动画效果完整实例

jQuery实现鼠标经过弹出提示信息的地图热点效果

JavaScript仿商城实现图片广告轮播实例代码

怎样开启Win10系统上的隐藏登录界面

Java中jqGrid 学习笔记整理——进阶篇(二)

在android中实现类似uc和墨迹天气的左右拖动效果

Win7如何隐藏共享文件夹、怎样隐藏用户没有权限访问的共享文件夹

IE8中动态创建script标签onload无效的解决方法

深入理解ECMAScript的几个关键语句

javascript定义变量时加var与不加var的区别

基于sqlite特殊字符转义的实现方法

PHP中的日期加减方法示例

使用纯css禁用html中a标签无需JavaScript

PHP中利用sleep函数实现定时执行功能实现代码