图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 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>
二、不同浏览器对这些属性的支持：
三、图解 event.offsetX，event.clientX，event.pageX，event.screenX属性
四、图解 event.layerX，event.layerY 属性
五、图解 event.x，event.y 属性
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
六、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>
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别的更多相关文章
- Js event对象offsetX，pageX，screenX，clientX详解
平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用. 检测相对于浏览器的位置:clientX和clientY 当鼠标事件发生时,鼠标相对于浏览器左上 ...
- 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- 一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
- event对象的clientX,offsetX,screenX,pageX
chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...
- clientX,pageX,screenX，offsetLeft，scrollTop
出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- js Event对象
(事件阶段)Event Phases Event对象在event第一次触发的时候被创建出来,并且一直伴随着事件在DOM结构中流转的整个生命周期.event对象会被作为第一个参数传递给事件监听的回调函数 ...
随机推荐
- GetReadyForWin10Develop
GetReadyForWin10Develop 序言 今年4月29日晚的微软的Build大会上,微软在现场为我们演示了Android和IOS应用移植到windows平台,加上原本可以开发win8应用的 ...
- SAP SD 需求类别确定
分别按如下优先级确定 1.先从物料主数据中取MRP组对应的策略组. 在物料的MRP1视图中可以得到MRP组, 通过OPPR事务,查找策略组 根据策略组找到对应的策略 img-->生产---> ...
- Python开发包推荐系列之xml、html解析器PyQuery
使用python,喜欢她的简洁是一方面,另外就是它有着丰富的开发包 好用又方便 接下来会给大家推荐一系列很赞的开发包. 在解析html.xml过程中,我们有不少的包可以用.比如bs.lxml.xmlt ...
- NSInvocation
NSInvocation 基本简介 NSInvocation是一个静态描绘的OC消息,也就是说,它是一个动作,这个动作可以变成一个对象.NSInvocation对象在对象和对象之间和应用程序和应用程序 ...
- 处理 InterruptedException——Brian Goetz
本文转自Brian Goetz大师在IBM的developerWorks中发布的文章: 中文地址:http://www.ibm.com/developerworks/cn/java/j-jtp0523 ...
- VISUAL STUDIO 调试
调试术语 Visual Studio调试之断点基础篇 Visual Studio调试之断点进阶篇 不能设置断点的检查步骤 Visual Studio调试之断点技巧篇 Visual Studio调试之断 ...
- 算法（三）粒子群算法PSO的介绍
一.引言 在讲算法之前,先看两个例子: 例子一:背包问题,一个书包,一堆物品,每个物品都有自己的价值和体积,装满书包,使得装的物品价值最大. 例子二:投资问题,n个项目,第i个项目投资为ci 收益为p ...
- Linux Shell 04 数字/字符串/文件测试
一. 数字测试 格式:n1 -op n2 测试操作op: eq/ne/le/ge/lt/gt --> 等于/不等于/小于等于/大于等于/小于/大于 1. 数字比较可以使用特殊的( ...
- java String部分源码解析
String类型的成员变量 /** String的属性值 */ private final char value[]; /** The offset is the first index of the ...
- 解决ubuntu sudo not found command的问题
将/etc/sudoers 中Defaults env_reset改成Defaults !env_reset取消掉对PATH变量的重置, 然后在/etc/bash.bashrc中最后添加alias s ...