首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式
阅读:21
JS获取鼠标指针的位置(坐标)
本示例讲解 JavaScript 获取指针的页面位置和相对位置。
下面示例演示了如何调用上面扩展函数 getMP() 捕获当前鼠标指针在文档中的位置。
考虑到边框对鼠标位置的影响,当元素边框很宽时,必须考虑如何消除边框对于鼠标位置的影响。但是,由于边框样式不同,它存在 3 像素的默认宽度,为获取元素的边框实际宽度带来了麻烦。需要设置更多的条件,来判断当前元素的边框宽度。
获取指针的页面位置
使用事件对象的 pageX 和 pageY(兼容 Safari),或者 clientX 和 clientY(兼容 IE)属性,同时还需要配合 scrollLeft 和 scrollTop 属性,就可以计算出鼠标指针在页面中的位置。//获取鼠标指针的页面位置 //参数:e表示当前事件对象 //返回值:返回鼠标相对页面的坐标,对象格式(x,y) function getMP (e) { var e = e || window.event; return { x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft), y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) } }pageX 和 pageY 事件属性不被 IE 浏览器支持,而 clientX 和 clientY 事件属性又不被 Safari 浏览器支持,因此可以混合使用它们以兼容不同浏览器。对于怪异模式来说,body 元素代表页面区域,而 html 元素被隐藏,但是标准模式以 html 元素代表页面区域,而 body 元素仅是一个独立的页面元素,所以需要兼容这两种解析方式。
下面示例演示了如何调用上面扩展函数 getMP() 捕获当前鼠标指针在文档中的位置。
<body style="width:2000px;height:2000px;"> <textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea> </body> <script> var t = document.getElementById("t"); document.onmousemove = function(e){ var m = getMP(e); t.value ="mouseX = " + m.x + "\n" + "mouseY = " + m.y } </script>演示效果如下:
获取指针的相对位置
使用 offsetX 和 offsetY 或者 layerX 和 layerY 可以获取鼠标指针相对定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 属性获取元素在定位包含框中的偏移坐标,然后使用 layerx 属性值减去 offsetLeft 属性值,使用 layery 属性值减去 offsetTop 属性值,即可得到鼠标指针在元素内部的位置。//获取鼠标指针在元素内的位置 //参数:e表示当前事件对象,o表示当前元素 //返回值:返回相对坐标对象 function getME (e, o) { var e = e || window.event; return { x : e.offsetX || (e.layerX - o.offsetLeft), y : e.offsetY || (e.layerY - o.offsetTop) } }在实践中上面函数存在以下两个问题:
- Mozilla 类型和 Safari 浏览器以元素边框外壁的左上角为参照点。
- 其他浏览器则是以元素边框内壁的左上角为坐标原点。
考虑到边框对鼠标位置的影响,当元素边框很宽时,必须考虑如何消除边框对于鼠标位置的影响。但是,由于边框样式不同,它存在 3 像素的默认宽度,为获取元素的边框实际宽度带来了麻烦。需要设置更多的条件,来判断当前元素的边框宽度。
示例
完善后的获取鼠标指针在元素内的位置扩展函数如下://完善获取鼠标指针在元素内的位置 //参数:e表示当前事件对象,o表示当前元素 //返回值:返回鼠标相对元素的坐标位置,其中x表示x轴偏移距离,y表示y轴偏移距离 function getME(e, o){ var e = e || window.event; //获取元素左侧边框的宽度 //调用getStyle()扩展函数获取边框样式值,并尝试转换为数值,如果转换成功,则赋值。 //否则判断是否定义了边框样式,如果定义边框样式,且值不为none,则说明边框宽度为默认值,即为3像素。 //如果没有定义边框样式,且宽度值为auto,则说明边框宽度为0 var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0); //获取元素顶部边框的宽度,设计思路与获取左侧边框方法相同 var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !="none" ) ? 3 : 0); var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // 一般浏览器下鼠标偏移值 //兼容Mozilla类型浏览器,减去边框宽度 var y = e.offsetY || (e.layerY - o.offsetTop - bt); // 一般浏览器下鼠标偏移值 //兼容Mozilla类型浏览器,减去边框宽度 var u = navigator.userAgent; // 获取浏览器的用户数据 if( (u.indexOf("KHTML") > - 1) ||(u.indexOf("Konqueror") > - 1) || (u.indexOf("AppleWebKit") > - 1) ){ // 如果是Safari浏览器,则减去边框的影响 x -= bl; y -= bt; } return { // 返回兼容不同浏览器的鼠标位置对象,以元素边框内壁左上角为定位原点 x : x, y : y } }演示效果如图所示。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频