zoukankan      html  css  js  c++  java
  • [1]区分event对象中的[clientX,offsetX,screenX,pageX]

    前言


    在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置。

    clientX clientY


    event.clientX
    event.clientY

    client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。

    event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。


    client范围

    兼容性:IE和主流游览器都支持。

    offsetX offsetY


    event.offsetX
    event.offsetY

    offset意为偏移量,是被点击的元素距左上角为参考原点的长度,而IE、FF和Chrome的参考点有所差异。

    Chrome下,offsetX offsetY是包含边框的,如图所示。


    chrome下的offset参考点

    而IE、FF是不包含边框的,如果鼠标进入到border区域,为返回负值,如图所示。


    IE、FF下的offset参考点

    兼容性:IE9+,chrome,FF都支持此属性。

    screenX screenY


    event.screenX
    event.sreenY

    screen顾名思义是屏幕,是用来获取鼠标点击位置到屏幕显示器的距离,距离的最大值需根据屏幕分辨率的尺寸来计算。

    兼容性:所有游览器都支持此属性。

    pageX pageY


    event.pageX
    event.pageY

    page为页面的意思,页面的高度一般情况client游览器显示区域装不下,所以会出现垂直滚动条。

    鼠标距离页面初始page原点的长度。


     

    在IE中没有pageX、pageY取而代之的是event.x、evnet.y。x和y在webkit内核下也实现了,所以火狐不支持x,y。

    兼容性:IE不支持,其他高级游览器支持。



    作者:Rin阳
    链接:http://www.jianshu.com/p/a52077e8369d
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    无向图的双连通分量
    以管理员身份运行软件cmd命令
    异或
    递推求解DAG最长路径长度及最长路径条数
    有向图转强连通图最少加边数
    Tarjan强连通分量(scc)
    uni封装request请求
    生命周期
    页面路由,以及传值
    WXS 模块
  • 原文地址:https://www.cnblogs.com/yeziTesting/p/7655091.html
Copyright © 2011-2022 走看看