zoukankan      html  css  js  c++  java
  • 关于js click事件、touch事件的 screen 、client

    screenX,screenY

    clientX,clientY

    screen 相对于屏幕左上角的坐标,单位为像素。

    client 相对于浏览器窗口左上角的坐标,单位为像素。

    举例:

    浏览器缩放或者放大时,screen 会发送变化,client 不会,当然除非你通过媒体查询或者其他方式更改了元素的宽高等等。

    实践,监听body:

    document.body.addEventListener('click',function(e){
    console.log('client:',e.clientX);
    console.log("sceen:",e.screenX);
    }
    );

    当前页面为100%情况下:

    放大为110%,这里156 是因为个人鼠标点击有偏差,不用太在意。。

    可以查看,client是没有变化的,比如你设置某个div left(当然是针对浏览器的绝对定位或者固定定位)为20px,那么不管放大缩小,clientX都是20px。

  • 相关阅读:
    pycharm路径
    git常用命令
    分页
    router
    视图集
    Leanring TypeScript 中文版
    RXJS 系列 04
    RXJS 系列 03
    RXJS 系列 02
    RXJS 系列 01
  • 原文地址:https://www.cnblogs.com/jony-it/p/11240279.html
Copyright © 2011-2022 走看看