js获取鼠标当前位置,js获取鼠标点击的位置
本教程运行环境：windows7系统，javascript1.8.5版本1.8.5，戴尔G3电脑。
在JavaScript中，当事件发生时，获取鼠标位置是非常重要的。由于浏览器的不兼容，不同的浏览器在各自的事件对象中定义了不同的属性，如下表所示。这些属性都是用像素值来定义鼠标指针的坐标，但是因为引用了不同的坐标系，所以要精确计算鼠标位置比较麻烦。
属性及兼容性属性描述兼容性clientX以浏览器窗口左上角为原点定位所有x轴坐标的浏览器，不兼容性SafariclientY以浏览器窗口左上角为原点定位所有Y轴坐标的浏览器，不兼容性SafarioffsetX以当前事件目标对象左上角为原点定位所有x轴坐标的浏览器，不兼容MozillaoffsetY以当前事件目标对象左上角为原点定位所有Y轴坐标的浏览器。不兼容MozillapageX以文档对象(即文档窗口)的左上角为原点，用X轴坐标定位所有浏览器。不兼容IEpageY以文档对象(即文档窗口)的左上角为原点。所有有Y轴坐标的浏览器，不兼容的IEscreenX电脑屏幕左上角为原点，所有有X轴坐标的浏览器，screenY电脑屏幕左上角为原点，所有有Y轴坐标的浏览器，layerX的最近绝对定位的父元素(如果没有，文档对象)为元素。定位x轴坐标Mozilla和SafarilayerY最近的绝对定位父元素(如果不是，文档对象)是元素，定位y轴坐标Mozilla和Safari示例1。
下面介绍如何利用多种鼠标坐标属性一起实现兼容不同浏览器的鼠标定位设计方案。
首先，我们来看看screenX和screenY属性。这两个属性是所有浏览器都支持的，应该说是最好的，但是它们的坐标系是电脑屏幕，也就是电脑屏幕的左上角是定位原点。这对于以浏览器窗口作为活动空间的网页没有任何价值。由于屏幕分辨率不同，浏览器窗口大小和位置不同，在网页中定位鼠标非常困难。
其次，如果以文档对象为坐标系，可以考虑使用pageX和pageY属性来实现在浏览器窗口中的定位。这是一个设计鼠标随动的好主意，因为随动元素一般是以绝对定位的方式在浏览器窗口中移动的。在mousemove事件处理程序中，pageX和pageY属性的值可以传递给绝对定位元素的顶部和左侧样式属性。
事件模型不支持上述属性，需要想办法兼容IE。看clientX和clientY属性，都是以窗口对象为坐标系，IE事件模型支持，可以选择。但是考虑到window等对象可能存在的滚动条偏移量，我们还应该加上页面滚动相对于window对象的偏移量。
复制纯文本复制var posX=0，posY=0；
var event=event window.event
if(event . paxx event . pakey){
posX=event.pageX
posY=event.pageY
} else if(event . clientx event . clienty){
posX=event . clientx document . document element . scroll left document . body . scroll left；
posY=event . clienty document . document element . scroll top document . body . scroll top；
}var posX=0，posY=0；
var event=event window.event
if(event . paxx event . pakey){
posX=event.pageX
posY=event.pageY
} else if(event . clientx event . clienty){
posX=event . clientx document . document element . scroll left document . body . scroll left；
posY=event . clienty document . document element . scroll top document . body . scroll top；
}在上面的代码中，首先检查pageX和pageY属性是否存在，如果存在，则获取它们的值；如果不存在，则检测并获取clientX和clientY属性的值，然后将document.documentElement和document.body对象的scrollLeft和scrollTop属性的值相加，从而在不同的浏览器中获得相同的坐标值。
示例2
封装鼠标定位代码。设计思路：根据传递的具体对象和鼠标指针的偏移量，可以命令对象随水土保持移动。
首先定义一个封装函数，设计函数的输入参数是对象引用指针、距鼠标指针的偏移距离、事件对象。然后封装函数就可以根据事件对象获取鼠标的坐标值，并将对象设置为绝对定位，绝对定位值就是鼠标指针的当前坐标值。
封装代码如下：
复制纯文本复制var pos=function (o，x，y，event){//鼠标定位赋值函数
var posX=0，posY=0；//临时变量值
var e=event window.event//标准化事件对象
If (e.pageX e.pageY) {//获取鼠标指针的当前坐标值
posX=e.pageX
posY=e.pageY
} else if (e.clientX e.clientY) {
posX=event . clientx document . document element . scroll left document . body . scroll left；
posY=event . clienty document . document element . scroll top document . body . scroll top；
}
o . style . position= absolute ；//将当前对象定义为绝对定位
o . style . top=(posY y) px ；//用鼠标指针的Y轴坐标和传入的偏移量值设置对象的Y轴坐标。
o . style . left=(posX x) px ；//用鼠标指针的x轴坐标和传入的偏移量值设置对象的x轴坐标。
} var pos=function (o，x，y，event){//鼠标定位赋值函数
var posX=0，posY=0；//临时变量值
var e=event window.event//标准化事件对象
If (e.pageX e.pageY) {//获取鼠标指针的当前坐标值
posX=e.pageX
posY=e.pageY
} else if (e.clientX e.clientY) {
posX=event . clientx document . document element . scroll left document . body . scroll left；
posY=event . clienty document . document element . scroll top document . body . scroll top；
}
o . style . position= absolute ；//将当前对象定义为绝对定位
o . style . top=(posY y) px ；//用鼠标指针的Y轴坐标和传入的偏移量值设置对象的Y轴坐标。
o . style . left=(posX x) px ；//用鼠标指针的x轴坐标和传入的偏移量值设置对象的x轴坐标。
}测试下面的封装代码。为文档对象注册鼠标移动事件处理函数，并将其传递给鼠标定位封装函数。传递的对象是一个div元素，并设置其位置偏移鼠标指针右下角的距离(10，20)。考虑到DOM事件模型以参数的形式传递事件对象，在调用函数时不要忘记传递事件对象。
复制纯文本复制div id=div1 鼠标跟随/div
脚本
var div 1=document . getelementbyid( div 1 )；
document . onmousemove=function(event){
pos (div1，10，20，event)；
}
/scriptdiv id=div1 鼠标跟随/div
脚本
var div 1=document . getelementbyid( div 1 )；
document . onmousemove=function(event){
pos (div1，10，20，event)；
}
/script示例3
获取元素中鼠标指针的坐标。这可以通过使用offsetX和offsetY属性来实现，但是Mozilla浏览器不支持。您可以选择layerX和layerY属性来与Mozilla浏览器兼容。
设计代码如下：
Copy纯文本copy var event=event window . event；
if(event . offsetx event . offsety){//对于非Mozilla浏览器
x=event.offsetX
y=event.offsetY
} else if(event . layerx event . layery){//与Mozilla浏览器兼容
x=event.layerX
y=event.layerY
} var event=event window.event
if(event . offsetx event . offsety){//对于非Mozilla浏览器
x=event.offsetX
y=event.offsetY
} else if(event . layerx event . layery){//与Mozilla浏览器兼容
x=event.layerX
y=event.layerY
}但是，layerX和layerY属性指的是绝对定位的父元素，而不是元素本身。如果没有绝对定位的父元素，文档对象将被用作引用。所以可以通过动态添加脚本或者手动添加的方式，在元素外层设计一个绝对定位的父元素，这样可以解决浏览器兼容的问题。考虑到元素间距离带来的误差，可以适当减去一个或几个像素的偏移量。
完整的设计代码如下：
复制纯文本复制输入类型=text id=text/
span style= position:absolute；
div id= div 1 style= width:200 px；高度：160px边框：纯色1px红色；鼠标跟随/div
/span
脚本
var t=document . getelementbyid( text )；
var div 1=document . getelementbyid( div 1 )；
div 1 . onmousemove=function(event){
var event=event window.event//标准化事件对象
if(event . offsetx event . offsety){
t . value=event . offsetx event . offsety；
} else if(event . layerx event . layery){
t . value=(event . layerx-1)“”(event . layery-1)；
}
}
/script input type= text id= text /
span style= position:absolute；
div id= div 1 style= width:200 px；高度：160px边框：纯色1px红色；鼠标跟随/div
/span
脚本
var t=document . getelementbyid( text )；
var div 1=document . getelementbyid( div 1 )；
div 1 . onmousemove=function(event){
var event=event window.event//标准化事件对象
if(event . offsetx event . offsety){
t . value=event . offsetx event . offsety；
} else if(event . layerx event . layery){
t . value=(event . layerx-1)“”(event . layery-1)；
}
}
/script该方法可以解决在元素内部定位鼠标指针的问题。但是，由于一个绝对定位的元素被包装在元素之外，整个页面的结构布局就会被破坏。在保证这种人为的方式不会导致结构布局混乱的前提下，可以考虑这种方式。
【推荐学习：javascript高级教程】以上是javascript如何获取鼠标位置的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。