zoukankan      html  css  js  c++  java
  • 鼠标定位问题总结

    鼠标事件发生时的鼠标定位问题即Mouse Position,由于标准的滞后及各个浏览器厂商的实现不同,目前没有完美的解决方案。

    该问题首先受到不同浏览器的事件模型有不同的实现方式的影响:

    IE浏览器中,有一个显式的window.event对象,可以随时取用。
    W3C兼容浏览器中,使用隐式对象,以第一个参数event的形式传递给事件处理函数。

    其次,不同浏览器中Event对象的位置相关属性也有差别:


    screenX 相对于电脑屏幕的左上角,鼠标的X坐标。标准属性,都支持。
    screenY 相对于电脑屏幕的左上角,鼠标的Y坐标。标准属性,都支持。

    clientX 相对于当前窗口可视区域(不包括窗口边框)的左上角,鼠标的X坐标。标准属性,都支持。
    clientY 相对于当前窗口可视区域(不包括窗口边框)的左上角,鼠标的Y坐标。标准属性,都支持。

    x 相对于css中有position属性的最近的父元素,鼠标偏移的x轴坐标。标准草案属性,等价于clientX,IE支持
    如果没有这样的父元素,默认以BODY元素(等价于pageX)。
    y 相对于css中有position属性的最近的父元素,鼠标偏移的y轴坐标。标准草案属性,等价于clientY,IE支持
    如果没有这样的父元素,默认以BODY元素(等价于pageY)。

    pageX 相对于BODY元素的左上角,鼠标的X坐标。标准草案属性,只有非IE,IE9以后版本支持。
    e.pageX = window.pageXOffset + e.clientX
    pageY 相对于BODY元素的左上角,鼠标的Y坐标。标准草案属性,只有非IE,IE9以后版本支持。
    e.pageY = window.pageYOffset + e.clientY

    offsetX 相对于css中有position属性的最近的父元素,鼠标偏移的x轴坐标。标准草案属性,非IE支持。
    offsetY 相对于css中有position属性的最近的父元素,鼠标偏移的Y轴坐标。标准草案属性,非IE支持。
    offsetX 相对于发出事件的元素,鼠标偏移的x轴坐标。标准草案属性,只有IE支持。
    offsetY 相对于发出事件的元素,鼠标偏移的Y轴坐标。标准草案属性,只有IE支持。

    layerX 相对于css中有position属性的最近的父元素,鼠标偏移的x轴坐标。非标准属性,等价于offsetX,只有非IE支持。
    layerY 相对于css中有position属性的最近的父元素,鼠标偏移的y轴坐标。非标准属性,等价于offsetY,只有非IE支持。

    scrollX,滚动条滚动的水平长度。
    scrollY,滚动条滚动的垂直长度。

  • 相关阅读:
    牛客训练三:处女座的训练(贪心)
    牛客训练二:处女座的砝码(数学题)
    牛客训练二:处女座的签到题(STL+精度+三角形求面积公式)
    牛客训练:小a与黄金街道(欧拉函数+快速幂)
    数论二(快速幂)
    数论一(欧拉函数+费马小定理)
    字典树模板
    springboot在idea的RunDashboard如何显示出来
    网关集成Swagger出现404错误
    maven一直加载2.0.0.M7 的 config server 失败
  • 原文地址:https://www.cnblogs.com/champagne/p/4786786.html
Copyright © 2011-2022 走看看