个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript

    • 防抖与节流
    • 本地存储
    • PWA
    • 地理位置
    • 对象 Object
    • 事件坐标详解
      • 常用函数
      • class类
      • Array 数组
      • 其他
      • blob下载文件
      • 深度克隆
      • 模块化
      • 常用工具函数
      • 拖拽
      • Map与Set
    • TypeScript

    • 前端基础
    • JavaScript
    NeverStop1024
    2022-08-25
    目录

    事件坐标详解

    20181130130831353_TVGzdj

    # 1. screenX 和screenY

    • 参照点:电脑屏幕左上角
    • screenX:鼠标点击位置相对于电脑屏幕左上角的水平偏移量
    • screenY:鼠标点击位置相对于电脑屏幕左上角的垂直偏移量

    # 2. clientX和clientY

    • 参照点:浏览器内容区域左上角
    • clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)
    • clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离)

    # 3.pageX和pageY

    • 参照点:网页的左上角
    • pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加上水平滚动条的距离
    • pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是clientY加上垂直滚动条的距离

    # 4. offsetX和offsetY

    • 参照点:事件触发DOM本身
    • offsetX:鼠标点击位置相对于触发事件对象的水平距离
    • offsetY:鼠标点击位置相对于触发事件对象的垂直距离
    编辑 (opens new window)
    上次更新: 2022/08/25
    对象 Object
    常用函数

    ← 对象 Object 常用函数→

    最近更新
    01
    mock使用
    07-12
    02
    websocket即时通讯
    07-12
    03
    前端面试题
    07-09
    更多文章>
    Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式