图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
来源:互联网 发布:刷微博粉丝的软件 编辑:程序博客网 时间:2024/06/06 12:46
通过 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>
1 0
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
- 图解JavaScript event对象的clientX,offsetX,screenX,pageX区别
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别
- pageX、clientX、screenX、offsetX、layerX、x区别 && click && stroke/fill
- clientX, pageX, offsetX,x, layerX, screenX, offsetLeft
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
- pageX、clientX、screenX、offsetX、layerX、x
- screenX/clientX/pageX/layerX/offsetX/x
- pageX、clientX、screenX、offsetX、layerX、x
- pageX、clientX、screenX、offsetX、layerX、x
- pageX、clientX、screenX、offsetX、layerX、X
- pageX、clientX、screenX、offsetX、layerX、x
- offsetX, clientX, pageX, screenX, layerX,
- clientX、screenX、pageX、offsetX、layerX
- webservice 服务创建
- 本地连接不通的情况下连接vmbox
- Struct和Class的区别
- jQuery Form插件详解
- 企业购买银行理财产品如何核算
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
- Servlet&JSP的那些事儿系列博文
- 天声人語 20150502
- Java编程书籍收集(高级)
- 日经春秋 20150502
- 安装Openyoudao
- java 注释的使用
- 求字符串的最长不重复字串
- 互联网金融:十大信息安全风险与十大最佳安全实践(转载)