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

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

一、测试代码如下:





Javascript


 

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

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别_第1张图片

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

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别_第2张图片

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

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别_第3张图片

 

五、图解 event.x,event.y 属性

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别_第4张图片

 

六、Jquery 兼容写法

 

你可能感兴趣的:(js基础,jQuery)