图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

最新推荐文章于 2024-04-28 08:32:47 发布

lzding

最新推荐文章于 2024-04-28 08:32:47 发布

阅读量5w

点赞数 36

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lzding/article/details/45437707

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过 3 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。

一、测试代码如下：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}
.main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}
.box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}
</style>
</head>

<body style="height:1600px;">
<div class="main">
	<div class="box" id="box"></div>
</div>

<script>
var oBox = document.getElementById('box');

window.onload = function(){
	
	oBox.onmousedown = function(ev){
		ev = ev || window.event;
		
		console.log(ev.offsetX, ev.offsetY);
		console.log(ev.clientX, ev.clientY);
		console.log(ev.pageX, ev.pageY);
		console.log(ev.screenX, ev.screenY);
		console.log(ev.layerX, ev.layerY);
		console.log(ev.x, ev.y);
	}
}

</script>
</body>
</html>

二、不同浏览器对这些属性的支持：

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

六、Jquery 兼容写法

Jquery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

<script>
$(function(){
	$("#box").mousedown(function(event){
		console.log(event.offsetX, event.offsetY);
		console.log(event.clientX, event.clientY);
		console.log(event.pageX, event.pageY);
		console.log(event.screenX, event.screenY);

		/* firefox */
		console.log(event.originalEvent.layerX, event.originalEvent.layerY);
	});
});
</script>

lzding

关注

36
点赞
踩
116

收藏

觉得还不错? 一键收藏
2
评论
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。不同浏览器对这些属性的支持：
复制链接

扫一扫