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

    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以内容为参考



  • 相关阅读:
    数据结构与算法之二叉树的遍历
    数据结构与算法之二叉树
    数据结构与算法之单调栈
    数据结构与算法之栈
    C里面的变长参数
    C++模板问题之多出的static
    通过返回值'重载'函数
    flask小记
    ANSI C
    Python坑
  • 原文地址:https://www.cnblogs.com/jsoo/p/2428328.html
Copyright © 2011-2022 走看看