js 获取位置,js怎么获取鼠标的位置
操作环境：Windows S10系统，javascript 1.8.5，thinkpad t480电脑。
要获得指针在页面上的位置，可以使用事件对象的pageX和pageY，或者clientX和clientY(与IE兼容)的属性，以及scrollLeft和scrollTop属性，这样就可以计算鼠标指针在页面上的位置。
//获取鼠标指针的页面位置
//参数：E表示当前事件对象
//返回值：返回鼠标相对于页面的坐标，对象格式(x，y)
函数getMP (e) {
var e=e window.event
返回{
x:e . pagex e . clientx(document . document element . scroll left document . body . scroll left)，
y:e . pakey e . clienty(document . document element . scroll top document . body . scroll top)
}
} IE浏览器不支持pageX和pageY事件属性，Safari浏览器不支持clientX和clientY事件属性，可以混合使用以兼容不同的浏览器。对于怪异模式，body元素表示页面区域，而html元素是隐藏的。但是在标准模式下，html元素表示的是页面区域，而body元素只是一个独立的页面元素，所以需要兼容这两种解析方式。
下面的例子演示了如何调用上面的扩展函数getMP()来捕获当前鼠标指针在文档中的位置。
body style= width:2000 px；高度：2000像素；
textarea id= t cols= 15 rows= 4 style= position:fixed；左：50px顶部：50px/textarea
/body
脚本
var t=document . getelementbyid( t )；
document . onmousemove=function(e){
var m=getMP(e)；
t . value= mouseX= m . x \ n mouseY= m . y
}
/脚本演示效果如下：
获取指针的相对位置
使用offsetX和offsetY或layerX和layerY获取鼠标指针相对于定位包含框的偏移位置。如果使用offsetLeft和offsetTop属性获取定位包含框中元素的偏移坐标，然后从layerx属性值中减去offsetLeft属性值，从layery属性值中减去offsetTop属性值，就可以获得鼠标指针在元素内部的位置。
//获取元素内鼠标指针的位置
//参数：E表示当前事件对象，O表示当前元素。
//返回值：返回相对坐标对象。
函数getME (e，o) {
var e=e window.event
返回{
x:e . offsetx (e . layerx-o . offset left)，
y:e . offsety (e . layery-o . offsettop)
}
}在实践中，上述函数有以下两个问题：
Mozilla type和Safari浏览器以元素边框外壁的左上角为参照点。
其他浏览器以元素边框内壁左上角为坐标原点。
考虑到边框对鼠标位置的影响，当元素边框较宽时，必须考虑如何消除边框对鼠标位置的影响。但由于边框样式不同，它的默认宽度为3个像素，这给获取元素的实际边框宽度带来了麻烦。你需要设置更多的条件来判断当前元素的边框宽度。
例子
用于获取元素中鼠标指针位置的改进扩展函数如下：
//完美地获取元素中鼠标指针的位置
//参数：E表示当前事件对象，O表示当前元素。
//返回值：返回鼠标相对于元素的坐标位置，其中X代表X轴的偏移距离，Y代表Y轴的偏移距离。
函数getME(e，o){
var e=e window.event
//获取元素左边框的宽度
//调用getStyle()扩展函数获取边框样式值，并尝试将其转换为数值。如果转换成功，则分配一个值。
//否则，确定是否定义了边框样式。如果定义了边框样式并且值不是none，则意味着边框宽度是默认值，即3个像素。
//如果没有定义边框样式，宽度值为auto，则边框宽度为0。
var bl=parseInt(getStyle(o， bordereftwidth ) ((o . style . bordereftstyle o . style . bordereftstyle！=无)？3 : 0);
//获取元素上边框的宽度。设计思路和获取左边界是一样的。
var bt=parseInt(getStyle(o， borderTopWidth ) ((o . style . bordertopstyle o . style . bordertopstyle！=无)？3 : 0);
var x=e . offsetx (e . layerx-o . offset left-bl)；//通用浏览器中的鼠标偏移值
//与Mozilla类型的浏览器兼容，减去边框宽度
var y=e . offsety (e . layery-o . offsettop-Bt)；//通用浏览器中的鼠标偏移值
//与Mozilla类型的浏览器兼容，减去边框宽度
var u=navigator.userAgent//获取浏览器的用户数据
if((u . index of( KHTML )-1) (u . index of( Konqueror )-1)(u . index of( apple WebKit )-1)
){//如果是Safari浏览器，减去边框的影响。
x-=bl；y-=Bt；
} return {//返回兼容不同浏览器的鼠标位置对象，以元素边框内壁左上角为定位原点。
x : x，y : y
}
}示范效果如下：
推荐：javascript视频教程以上是javascript如何获取指针位置的细节。请多关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。