js获取鼠标位置的方法：1、使用clientx和clienty属性；2、使用offsetx和offsety属性；3、使用pagex和pagey属性；4、使用screenx和screeny属性；5、使用layerx和layery属性。
本教程操作环境：windows7系统、javascript1.8.5版、dell g3电脑。
在 javascript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。
属性及其兼容性属性说明兼容性
clientx 以浏览器窗口左上顶角为原点，定位 x 轴坐标 所有浏览器，不兼容 safari
clienty 以浏览器窗口左上顶角为原点，定位 y 轴坐标 所有浏览器，不兼容 safari
offsetx 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标 所有浏览器，不兼容 mozilla
offsety 以当前事件的目标对象左上顶角为原点，定位 y 轴坐标 所有浏览器，不兼容 mozilla
pagex 以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标 所有浏览器，不兼容 ie
pagey 以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标 所有浏览器，不兼容 ie
screenx 计算机屏幕左上顶角为原点，定位 x 轴坐标 所有浏览器
screeny 计算机屏幕左上顶角为原点，定位 y 轴坐标 所有浏览器
layerx 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标 mozilla 和 safari
layery 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标 mozilla 和 safari
示例1
下面介绍如何配合使用多种鼠标坐标属性，以实现兼容不同浏览器的鼠标定位设计方案。
首先，来看看 screenx 和 screeny 属性。这两个属性获得了所有浏览器的支持，应该说是最优选用属性，但是它们的坐标系时计算机屏幕，也就是说，以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率，不同的浏览器窗口大小和位置，都使得在网页中定位鼠标成为一件很困难的事情。
其次，如果以 document 对象为坐标系，则可以考虑选用 pagex 和 pagey 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意，因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动，在 mousemove 事件处理函数中把 pagex 和 pagey 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。
ie 事件模型不支持上面的属性，为此还需寻求兼容 ie 的方法。而看 clientx 和 clienty 属性是以 window 对象为坐标系，且 ie 事件模型支持它们，可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量，所以还应加上相对于 window 对象的页面滚动的偏移量。
复制纯文本复制




var posx = 0, posy = 0;var event = event || window.event;if (event.pagex || event.pagey) { posx = event.pagex; posy = event.pagey;} else if (event.clientx || event.clienty) { posx = event.clientx + document.documentelement.scrollleft + document.body.scrollleft; posy = event.clienty + document.documentelement.scrolltop + document.body.scrolltop;}
var posx = 0, posy = 0;var event = event || window.event;if (event.pagex || event.pagey) { posx = event.pagex; posy = event.pagey;} else if (event.clientx || event.clienty) { posx = event.clientx + document.documentelement.scrollleft + document.body.scrollleft; posy = event.clienty + document.documentelement.scrolltop + document.body.scrolltop;}
在上面代码中，先检测 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.documentelement.scrollleft + document.body.scrollleft; posy = event.clienty + document.documentelement.scrolltop + document.body.scrolltop; } 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.documentelement.scrollleft + document.body.scrollleft; posy = event.clienty + document.documentelement.scrolltop + document.body.scrolltop; } o.style.position = "absolute"; //定义当前对象为绝对定位 o.style.top = (posy + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标 o.style.left = (posx + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标}
下面测试封装代码。为 document 对象注册鼠标移动事件处理函数，并传入鼠标定位封装函数，传入的对象为 <div> 元素，设置其位置向鼠标指针右下方偏移（10,20）的距离。考虑到 dom 事件模型通过参数形式传递事件对象，所以不要忘记在调用函数中还要传递事件对象。
复制纯文本复制




<div id="div1">鼠标追随</div><script> var div1 = document.getelementbyid("div1"); document.onmousemove = function (event) { pos (div1, 10, 20, event); }</script>
<div id="div1">鼠标追随</div><script> var div1 = document.getelementbyid("div1"); document.onmousemove = function (event) { pos (div1, 10, 20, event); }</script>
示例3
获取鼠标指针在元素内的坐标。使用 offsetx 和 offsety 属性可以实现这样的目标，但是 mozilla 浏览器不支持。可以选用 layerx 和 layery 属性来兼容 mozilla 浏览器。
设计代码如下：
复制纯文本复制




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 属性是以绝对定位的父元素为参照物，而不是元素自身。如果没有绝对定位的父元素，则会以 document 对象为参照物。为此，可以通过脚本动态添加或者手动添加的方式，设计在元素的外层包围一个绝对定位的父元素，这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差，可以适当减去 1 个或几个像素的偏移量。
完整设计代码如下：
复制纯文本复制




<input type="text" id="text" /><span style="position:absolute;"> <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div></span><script> var t = document.getelementbyid("text"); var div1 = document.getelementbyid("div1"); div1.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="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div></span><script> var t = document.getelementbyid("text"); var div1 = document.getelementbyid("div1"); div1.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怎样获取鼠标位置的详细内容。