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

最新推荐文章于 2022-04-28 19:40:17 发布

shangrila-xiu

最新推荐文章于 2022-04-28 19:40:17 发布

阅读量422

点赞数

分类专栏： js 文章标签：原生js（四）鼠标事件和元素大小

本文链接：https://blog.csdn.net/lyx9611/article/details/89714917

版权

js 专栏收录该内容

91 篇文章 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：返回当某个事件被触发时，鼠标指针的水平坐标。(距离浏览器左上方)/垂直坐标（距离浏览器上方）

<!--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返回当事件被触发时，鼠标指针的水平坐标（鼠标点击位置距离可视窗口左上角的位置）和垂直坐标。

<script type="text/javascript">
function show_coords(event)
  {
  x=event.clientX
  y=event.clientY
  alert("X coords: " + x + ", Y coords: " + y)
  }
</script>
</head>

<body onmousedown="show_coords(event)">
	<!-- clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 -->
	<p>点击页面，弹出“返回当事件被触发时，鼠标指针的水平坐标和垂直坐标。”</p>

</body>

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;

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

浏览器兼容性参见

<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的元素的位置

<!--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+包含内容的完全高度

shangrila-xiu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js鼠标事件和元素大小的讲解（四）

1、鼠标相关事件位置属性（clientX、pageX、offsetX、screenX、X、layerX），并推荐使用请看总结处。2、元素大小相关（offsetWidth、offsetHeight、clientWidth、scrollWidth）
复制链接

扫一扫

专栏目录