clientX/clientY 与 screenX/screenY 的区别

在JavaScript当中有时候我们需要获取鼠标悬停的位置，以此来做一些特殊处理。这时候就需要用到MouseEvent对象。MouseEvent对象提供了两组属性来定位鼠标的位置：clientX/clientY和screenX/screenY。除了这两组属性我们经常还会用到pageX/pageY和offsetX/offsetY这两组属性也是用来定位鼠标的，那么他们究竟有什么异同呢。

属性说明

clientX/clientY

名称	说明	返回
clientX	返回事件触发时鼠标相对于*元素视口* 的X坐标	数值
clientY	返回事件触发时鼠标相对于*元素视口* 的Y坐标	数值

这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。

screenX/screenY

名称	说明	返回
screenX	返回事件触发时鼠标相对于屏幕的X坐标	数值
screenY	返回事件触发时鼠标相对于屏幕的Y坐标	数值

顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。

pageX/pageY

名称	说明	返回
pageX	返回事件触发时鼠标相对于文档的X坐标	数值
pageY	返回事件触发时鼠标相对于文档的Y坐标	数值

所谓文档可以简单的理解为浏览器中的页面内容，pageX是鼠标距离文档左侧的距离，pageY是鼠标距离文档上侧的距离，如果我们将鼠标悬停在浏览器中间，通过滚轮滚动浏览器，那么尽管没有移动鼠标的位置而pageY一直在变化，因为相对文档顶部的距离一直在变化。

offsetX/offsetY

名称	说明	返回
offsetX	返回事件触发时鼠标相对于*事件指向元素* 的X坐标	数值
offsetY	返回事件触发时鼠标相对于*事件指向元素* 的Y坐标	数值

假设有一个元素<p>test</p>当鼠标进入元素中触发事件时这是offsetX指的就是鼠标到P元素左边的距离。但是这个属性并不是标准属性，因此IE和chrome对这个属性的支持并不一样。在chrome中offsetX和offsetY的值均为整数，而在IE中值为小数形式，并且如果元素有border属性也会影响到offsetY的计算。

示例代码

mouseover.html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><link type="text/css" href="../css/test.css" rel="stylesheet"><script src="../js/jquery-2.1.4.js"></script><script src="../js/eventtest.js"></script>
</head>
<body><div class="container"><!--可以在这里随意添加一些内容，方便看出pageY和其他属性的区别--><div class="section" ></div><hr><div class="section" ><h3>clientX 和 screenX</h3><div class="example"><p id="position">please move mouse into this area.<br />clientX是到浏览器左侧的距离，screenX是到显示屏左侧的距离。通过缩小浏览器的大小可以明显看出变化</p></div></div>
</div>
</body>
</html>

test.css

div.container{width:980px;margin-left: auto;margin-right: auto;
}
div.example{height: 100px;border:solid 1px #ccc;background:#f8f8f8;
}pre{border:solid 1px #ccc;background:#f8f8f8;
}#banana{font-family: FreeSerif;font-size: 20px;background: yellow;
}#position{border:solid 1px #ccc;margin-left: 20px;
}

eventtest.js

/*** Created by qiumingsheng on 2015/8/27.*/$(function(){$('#position')[0].addEventListener("mousemove",handlePositionEvent);$('#position')[0].addEventListener("mouseout",handlePositionEvent);function handlePositionEvent(e){if(e.type == 'mousemove'){$(e.target).html("clientX:"+ e.clientX+"  clientY:"+e.clientY+"<br />"+"screenX:"+ e.screenX +" screenY:"+e.screenY+"<br />"+"pageX:"+ e.pageX+"  pageY:"+e.pageY+"<br />"+"offsetX:"+ e.offsetX+"  offsetY:"+e.offsetY);}else{$(e.target).text(" please move mouse into this area.");}};
});

clientX/clientY 与 screenX/screenY 的区别相关推荐

pageX/pageY、clientX/clientY、screenX/screenY的区别
在触发鼠标事件的时候会传一个event参数,在这个参数中我们可以获得pageX/pageY.clientX/clientY.screenX/screenY,但是这几个属性有啥区别呢?看下图 scree ...
clientX,clientY,screenX,screenY,offsetX,offsetY 区别测试
clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置: clientY:当鼠标事件发生 ...
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
clientX, clientY | offsetX, offsetY | pageX, pageY的区别: ✍ clientX, clientY:指的是鼠标点击位置距离可视窗口的坐标: 图示:在不拉 ...
clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
clientX,offsetX,pageX,screenX的异同对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼,首先我们从文字上解释它的异同首先我们要明确对于浏览器而言,它的X还 ...
什么?你还不知道offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别，进来唠唠
offsetX.offsetY: 鼠标相对于事件源元素的X,Y坐标.比如说,给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角,offsetX.offsetY就是相对于 ...
JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别
1.event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 2.event.p ...

clientX/clientY 与 screenX/screenY 的区别

clientX/clientY 与 screenX/screenY 的区别

属性说明

示例代码

clientX/clientY 与 screenX/screenY 的区别相关推荐

最新文章

热门文章