zoukankan      html  css  js  c++  java
  • 各坐标Api之前的区别

    某个div的点击事件后,返回的坐标信息:

    1. clientX: 499 : 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)
    2. clientY: 230 : 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)
    3. layerX: 48  :
    4. layerY: 25
    5. movementX: 0
    6. movementY: 0
    7. offsetX: 24 : event.offsetX设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 (触发事件的元素,ie,chrome支持此属性,ff不支持)
    8. offsetY: 17 : event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 (触发事件的元素,ie,chrome支持此属性,ff不支持)
    9. pageX: 499 : 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域包括窗口自身的控件和滚动条
    10. pageY: 230 : 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域包括窗口自身的控件和滚动条
    11. screenX: 499 : event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。(用户屏幕左上角) 
    12. screenY: 301 : event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 (用户屏幕左上角) 

    event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)
    event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)
    event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 (触发事件的元素,ie,chrome支持此属性,ff不支持)
    event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 (触发事件的元素,ie,chrome支持此属性,ff不支持)
    event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。(用户屏幕左上角) 
    event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 (用户屏幕左上角) 
    event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。(ff不支持)
    event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。(ff不支持)

    event.layerX 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,

                      以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点(未理解)

    event.laylerY 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,

                       以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点(未理解)

    event.pageX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域包括窗口自身的控件和滚动条。

    event.pageY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域包括窗口自身的控件和滚动条。

  • 相关阅读:
    Git 自救指南:这些坑你都跳得出吗?
    敢不敢模拟超过 5 万的并发用户?
    一条简单的 SQL 执行超过 1000ms,纳尼?
    JVM 最多支持多少个线程?
    19 条效率至少提高 3 倍的 MySQL 技巧
    LeetCode 剑指offer 面试题04. 二维数组中的查找
    LeetCode 剑指offer 面试题03 数组中重复的数字
    东华大学计算机软件工程 复试最后一百题
    东华大学计算机软件工程复试 挑战练习
    东华大学计算机软件工程复试 进阶练习
  • 原文地址:https://www.cnblogs.com/ljh-zw/p/11201664.html
Copyright © 2011-2022 走看看