zoukankan      html  css  js  c++  java
  • JavaScript event对象clientX,offsetX,screenX异同

    event对象是JavaScript中最重要的对象之一,他代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动、鼠标活动等等,其中有几个对象官方说的比较模糊,很难理解,这里有必要通俗化的理解一下。

    概念(不是官方,来源于网络):

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
    clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
    offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
    offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
    screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
    screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
    x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。 
    y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

    补充:

    pageX,pageY

    顾名思义,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度

    具体分析实验点这里。已经分析的很清楚了,这是目前网上讲的比较透彻的博文。为了理解这个状态,我做了一个效果图,希望能帮助理解、加深记忆。

    说明,这是上面那个博文里面的运行图,事件为单击图中触发点。直线代表各种值的计算范围。

    原文:http://www.cnblogs.com/long_/archive/2010/09/09/1822574.html

  • 相关阅读:
    June. 26th 2018, Week 26th. Tuesday
    June. 25th 2018, Week 26th. Monday
    June. 24th 2018, Week 26th. Sunday
    June. 23rd 2018, Week 25th. Saturday
    June. 22 2018, Week 25th. Friday
    June. 21 2018, Week 25th. Thursday
    June. 20 2018, Week 25th. Wednesday
    【2018.10.11 C与C++基础】C Preprocessor的功能及缺陷(草稿)
    June.19 2018, Week 25th Tuesday
    June 18. 2018, Week 25th. Monday
  • 原文地址:https://www.cnblogs.com/eaysun/p/4762025.html
Copyright © 2011-2022 走看看