【event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等】的更多相关文章

event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcEle…

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非…

event对象的clientX,offsetX,screenX,pageX

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera: e.pageX——相对整个页面的…

[1]区分event对象中的[clientX,offsetX,screenX,pageX]

前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXevent.clientY client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏.导航栏等等). event.clientX.event.clientY就是用来获取鼠标距游览器显示窗口的长度. client范围 兼容性:IE和主流游览器都支持. offsetX offs…

clientX,offsetX,screenX,pageX 区别！

先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcEle…

clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106 ): 由上图可见题目中的6种属性可分为三大类: 1.鼠标指针相对于屏幕的坐标:screenX/Y 2.相对于页面且不考虑滚动条是否滚动:clientX/Y,X/Y 3.相对于页面且考虑滚动条:pageX/Y,layerX/Y,offsetX/Y 下面着重讨论2,3. 红色对应上文的2类.div3设置…

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offsetX 先统一了解下这四个概念,理解不透没关系,咱们把概念相近的对比着一一细说. pageX:鼠标指针距离文档X轴左侧边缘的距离,不随滚动条变化而变化 clientX:鼠标指针距离可视窗口左侧边缘的距离,随着滚动条变化而变化 screenY:鼠标指针距离屏幕的距离(包括浏览器工具栏之类),不随滚动条变化…

pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

https://www.cnblogs.com/echolun/p/9231760.html…

clientX .offsetX .screenX x 的区别

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标…

图解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> <st…