鼠标事件都是在特定位置发生的，我们可以通过event事件对象的各种属性来获得事件发生的坐标位置，有相对于视口的，有相对于整个文档的，同样页面元素的位置也有相对视口的，也有滚动后的，这些都比较容易混淆，所以整理在这里，备忘，待查。 .客户区坐标位置 clientX clientY 我们可以通过event事件对象的clientX clientY属性获得事件发生时鼠标指针在视口中的水平和垂直坐标。 示 ...
2014-11-25 17:28 5 5904 推荐指数：
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框 ...
clientX,offsetX,layerX,pageX,screenX,X有时容易记混，通过测试当前的主流浏览器疏理了自己的一些看法以供参考。 Chrome下（测试版本为51.0.2704.106 ）： 由上图可见题目中的6种属性可分为三大类： 1.鼠标指针 ...
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取 ...
自己开发的公众号，可以领取淘宝内部优惠券 screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域 ...
screenX clientX pageX概念 打开的pop窗口随着鼠标点击的dom元素而定位展示的js代码： e是click事件，o是pop窗口的宽度或高度， eventX = function (e, o) { e = e || window.event; o = o || 0; x ...
clientWidth：元素可见区域的宽度 clientWidth=padding+width-滚动条 scrollWidth：元素实际内容的宽度 scrollWidth=padding+width（元素实际的内容） offsetWidth：元素可见区域的宽度+边框 ...
转自他的博客：https://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别。 说明： scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象 ...
通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： 二、不同浏览器对这些属性的支持： 三、图解 event.offsetX ...
