原生js鼠标事件和元素大小的讲解（四）

浅浅的花香味﹌ 2022-04-25 03:08 85阅读 0赞

## 鼠标相关事件位置属性 ##

> screenX/screenY返回当某个事件被触发时，鼠标指针的水平坐标。(距离浏览器左上方)/垂直坐标（距离浏览器上方）  
> clientX/clentY 鼠标点击位置距离可视窗口左上角的位置  
> pageX/pageY 鼠标点击位置距离文档左上角的位置  
> offsetX/offsetY 鼠标点击位置距离当前元素的边框内的位置； offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。  
> layerX/layerY 鼠标点击位置距离当前元素的距离最近的非static的元素的位置

--------------------

**pageX、pageY和clientX、clientY的区别？**

> pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；  
> clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；

--------------------

> **offsetX/Y:**  
> offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。  
> 兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持  
> **layerX/Y:**  
> layerX/Y获取到的是触发点相对被触发dom左上角的距离，**数值与offsetX/Y相同**，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离  
> 兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

--------------------

**screenX/screenY：返回当某个事件被触发时，鼠标指针的水平坐标。(距离浏览器左上方)/垂直坐标（距离浏览器上方）**

<script type="text/javascript"> function show_coords(event) { x=event.screenX y=event.screenY alert("X coords: " + x + ", Y coords: " + y) } </script>
    </head>
    <body onmousedown="show_coords(event)">
    
    <p>点击这部分内容，会弹出鼠标距离浏览器左上方的位置（水平坐标）和距离浏览器上方的位置（垂直坐标）</p>

--------------------

**clientX和clientY返回当事件被触发时，鼠标指针的水平坐标（鼠标点击位置距离可视窗口左上角的位置）和垂直坐标。**

--------------------

## pageX和pageY：距离文档左上方的位置 ##

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    	<style type="text/css"> #wrap{ border: 1px solid #edb; } #page{ border: 1px solid #cbf; } </style>
    </head>
    <body>
    	<div id="wrap">
    		<p id="page">点击页面弹出“pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离”</p>
    	</div>	
    	<script> window.onload=function(){ var oDiv = document.getElementById('wrap'); oDiv.onmousedown=function(e){ e = e || window.event; alert("距离文档左上角pageX"+e.pageX+",距离文档右上角pageY"+e.pageY) } } </script>
    
    </body>
    </html>

--------------------

**offsetX和offsetY**

> *这是一个实验中的功能*  
> 此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

语法：

var xOffset = instanceOfMouseEvent.offsetX;

返回值：  
**一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。**

[浏览器兼容性参见][Link 1]

<div id="wrap">
    		<p id="page">点击页面</p>
    	</div>	
    	<script> window.onload=function(){ var oDiv = document.getElementById('wrap'); oDiv.onmousedown=function(e){ e = e || window.event; alert("只读属性 offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量："+e.offsetX+",在Y轴方向上："+e.offsetY) } } </script>

--------------------

**layerX/layerY 鼠标点击位置距离当前元素的距离最近的非static的元素的位置**

<div id="wrap">
    		<p id="page">点击页面弹出</p>
    	</div>	
    	<script> window.onload=function(){ var oDiv = document.getElementById('wrap'); oDiv.onmousedown=function(e){ e = e || window.event; alert("在X轴方向上："+e.layerX+",在Y轴方向上："+e.layerY) } } </script>

--------------------

**总结您不知道或者知道的。**

> 推荐使用：  
> 　　screenX/Y：鼠标位置相对于屏幕的坐标  
> 　　pageX/Y：相对于文档边缘（包含滚动条距离）  
> 　　clientX/Y：相对于当前页面且不包含滚动条距离  
> 　　offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。  
> 　　*其他：*  
> 　　X/Y：与clientX/Y相同，firefox不支持  
> 　　layerX/Y：除IE外与pageX/Y相同，IE11下与clientX/Y相同。非官方属性。

## 元素大小相关 ##

> offsetWidth=border+padding+width  
> offsetHeight=border+padding+height  
> clientWidth=padding+width-滚动条宽度  
> clientHeight=padding+height-滚动条宽度  
> scrollWidth=padding+包含内容的完全宽度  
> scrollHeight=padding+包含内容的完全高度

推荐：[javascript 中 x offsetX clientX screenX pageX的区别][javascript _ x offsetX clientX screenX pageX]  
[clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解][clientX_offsetX_layerX_pageX_screenX_X]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/offsetX#Browser_compatibility
[javascript _ x offsetX clientX screenX pageX]: https://blog.csdn.net/yang_chuanlong/article/details/49232945
[clientX_offsetX_layerX_pageX_screenX_X]: http://doc.okbase.net/xulei1992/archive/244564.html