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

最新推荐文章于 2025-04-29 12:45:29 发布

lzding

最新推荐文章于 2025-04-29 12:45:29 发布

阅读量5.1w

点赞数 36

CC 4.0 BY-SA版权

分类专栏： JavaScript

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

通过 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;