• Js中clientX/Y、offsetX/Y和screenX/Y之间区别

    Js中client、offset和screen的区别

    前言

    本文主要讲解JavaScript中clientX、clientY、offsetX、offsetY、screenX、screenY之间的区别。

    图文解说

    在这里插入图片描述
    在上图中，有三个框，第一个为屏幕，第二个为浏览器大小，第三个为某个DOM元素。而点击事件属性中的screenX或Y就是距离屏幕左、上侧的距离，而clientX和clientY就是距离浏览器左、上侧的距离，子u后offsetX、offsetY就是跟点击时鼠标在哪个元素中，那么就计算跟这个元素的左、上侧距离。也就是下图所示。
    在这里插入图片描述
    在上图中，我们点击了这个正方形DOM元素，那么它的offsetX就是距离这个正方形元素左侧的距离，而offsetY就是距离正方形上侧的距离，它的clientX就是距离浏览器左侧的距离，clientY就是距离浏览器上侧的距离，它的screenX就是距离它整个屏幕左侧的距离，它的screenY就是距离它整个屏幕上侧的距离。

    实例代码解说

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width:200px;height:200px;border:1px solid gray;"></div>
		<script>
			document.onmousedown=function(e){
				console.log("距离点击元素位置",e.offsetX,e.offsetY);
				console.log("距离浏览器位置",e.clientX,e.clientY)
				console.log("距离屏幕位置",e.screenX,e.screenY);
			}
		</script>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述
    在上述代码中我们可以看到，我们HTML结构中只有一个id为circle的div，并且給它设置了宽高和边框，同时在js中我们添加了鼠标的点击事件onmousedown,那这个点击事件并没有根据某个元素进行绑定，而是绑定在了整个浏览器中，作为一个鼠标点击事件的监听，当我们点击某个元素内值时候，打印对应的clientX/clientY、offsetX/offsetY、screenX/screenY。会发现，距离点击元素位置和距离浏览器位置永远都差大于等于8，那是因为浏览器默认内外边距为8px，所以说，这也恰恰证明了，在图文解说中说的是正确的。
    注：当我们鼠标点击事件中所在区域没有元素时，默认offsetX和offsetY也为浏览器的距离

  • 相关阅读:
    上周热点回顾（6.20-6.26）
    【云原生】设备云之前端可视化编程
    易语言代码人流量统计
    北京建筑笔记
    解决VMware虚拟机更新17.5.0版本后，启动虚拟机导致电脑重启的问题。（建议收藏）
    基于边缘网关的智慧工地监测方案
    【LeetCode】169. 多数元素
    LVS负载均衡集群
    jsp 前端传值，后端接受不到
    Spring Cloud Zookeeper 优雅下线优化
  • 原文地址：https://blog.csdn.net/lplovewjm/article/details/134495647