zoukankan      html  css  js  c++  java
  • pageX,clientX,offsetX,layerX的那些事

    pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,
    导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_<

    John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.
    所以,今天,先拿几个页面位置属性开刀.

    PageX和clientX ,这个两个比较容易搞混,
    PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
    clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
    真拗口,直接上图,

    两个DIV接触点(黑点位置)
    如果将浏览器Y轴方向缩小,出现了滑动条就可以分辨出两者的区别

    很明显,红色参考块已经被滑动条截取部分,PageY不变,但是clientY已经变了

    可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T
    所以大牛们想出了一个办法
    PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
    页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
    直接上图

    很明显,模块交界处,scrollTop代表的是被浏览器滑动条滚过的长度,和clientY相加,刚好等于100,
    最后还要再减去一个clientTop,即是border-top的宽度

    screenX:鼠标在显示屏幕上的坐标。
    clientX:鼠标在页面显示区域的坐标。
    注:以上两个都是各浏览器通用的。 


    PageX clientX区别:

    PageX
    :IE(不支持)鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。

    clientX
    鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化。

    转化代码:
    var doc = document.documentElement,body=document.body;
    pageX = clientX + Math.max(doc.scrollLeft,body.scrollLeft);
    pageY = clientY  + Math.max(doc.scrollTop,body.scrollTop);


    offsetX  layerX 区别:

    offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。IE以内容区域开始,鼠标向上进入border将出现负值。

    layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点。

    offsetX以border为参考,layerX以内容为参考




    注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。
    offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。

    转载:http://www.codesky.net/article/doc/201004/20100417044073.htm

  • 相关阅读:
    [java]struts2入门
    [c#基础]ICloneable接口
    idea jsp html 空白页的问题
    在Intellij Idea中使用jstl标签库
    org.apache.catalina.LifecycleException: Failed to start component
    tomcat点击startup.bat一闪而退的方法
    [转]小心C# 5.0 中的await and async模式造成的死锁
    体验h5离线缓存
    [Asp.net core]使用Polly网络请求异常重试
    asp.net core读取appsettings.json,如何读取多环境开发配置
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400100.html
Copyright © 2011-2022 走看看