js中event对象的offsetX、 clientX、pageX、screenX、 layerX、x之间的区别

简介: 我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量,但是有的时候有搞不清楚他们之间的区别,甚至被搞得一头雾水。

我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量,但是有的时候有搞不清楚他们之间的区别,甚至被搞得一头雾水。
这里给大家总结了一下他们之间的区别,而且使用图片给大家清晰的展示出来。

图片是从其他大神那里字节拿过来用的,这是大神的原博客 江波的博客

一、测试代码:

window.onload=function(e){
    var box=document.getElementById("box");
    box.onclick=function(e){
        console.log(e.clientX,e.clientY);
        console.log(e.offsetX,e.offsetY);
        console.log(e.pageX,e.pageY);
        console.log(e.screenX,e.screenY);
        console.log(e.layerX,e.layerY);
    }
}

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

img_729b486f2c5964e88420ba04486fb5bf.png

三、图解 event.offsetX,event.clientX,event.pageX,event.screenX属性

img_0dd0fbe280de6112d9c8bb8b0ab8acab.jpe

四、图解 event.layerX,event.layerY 属性

img_2d49b3d1ca9bf26d6b29e63092cb214e.jpe

五、图解 event.layerX,event.layerY 属性

img_9719ee9e5c639c74a95a478d2c225326.jpe
相关文章
|
1天前
|
JSON JavaScript 安全
向js发送含有NSDictionary对象或NSArray对象的消息
向js发送含有NSDictionary对象或NSArray对象的消息
9 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:判断对象属性是否存在
前端 JS 经典:判断对象属性是否存在
6 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:typeof 和 instanceof 区别
前端 JS 经典:typeof 和 instanceof 区别
8 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:for-in 和 for-of 用法区别
前端 JS 经典:for-in 和 for-of 用法区别
9 0
|
5天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
8 0
|
5天前
|
前端开发 JavaScript
前端 JS 经典:i,i++,++i区别
前端 JS 经典:i,i++,++i区别
8 0
|
5天前
|
前端开发 JavaScript
前端 JS 经典:let、const、var 区别
前端 JS 经典:let、const、var 区别
6 0
|
5天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
5天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
14 1
|
5天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露