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

前端之家收集整理的这篇文章主要介绍了clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

@H_502_2@
  • 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属性获取元素相对于文档左上角的坐标位置。

    猜你在找的JavaScript相关文章