clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

• event.clientX/Y
• event.pageX/Y
• event.offsetX/Y
• event.layerX/Y
• event.screenX/Y

 

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变

兼容性：所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

兼容性：除IE6/7/8不支持外，其余浏览器均支持

offsetX/Y:

offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

 layerX/Y:

layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y:

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变

兼容性：所有浏览器均支持

区分innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性

window对象：

（1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。

     IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。

（2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。

     IE不支持该属性，IE中body元素的clientWidth属性与该属性相同。

     clientHeight与clientWidth属性是只读的。

     另外，IE不支持outerWidth、outerHeight属性。

 (3)pageXOffset属性：整数只读属性，表示文档向右滚动过的像素数。

     IE不支持该属性，使用body元素的scrollLeft属性替代。

 (4)pageYOffset属性：整数只读属性，表示文档向下滚动过的像素数。

     IE不支持该属性，使用body元素的scrollTop属性替代。

 兼容IE与DOM浏览器，如何获取窗口中文档显示区域的宽度及高度，使用?:条件语句，如下：

 windows.innerWidth ? windows.innerWidth : document.body.clientWidth;

 windows.innerHeight ? windows.innerHeight : document.body.clientHeight;

 

元素对象：

   offsetLeft、offsetTop属性：获取元素相对于文档左上角的坐标位置。