pageX clientX offsetX之间的区别
鼠标在页面中的定位有pageX pageY clientX clientY offsetX offsetY等，总是分不清楚这几个之间有什么区别，写一篇文章作为备忘录
clientX和clientY
红色区域为浏览器可视窗口，绿色的圆为鼠标所在的位置，clientX和clientY所依据的点就是浏览器可视窗口左上角的那个点
pageX和pageY
当页面不滚动的时候，pageX = clientX pageY = clientY
当页面滚动的时候 ，pageX 和 pageY 所依据的点不是浏览器可是窗口的左上角，而是整个网页内容的左上角，就是图中橙色点所在的位置
offsetX 和 offsetY
下图中蓝色框为页面中某个元素，监听该元素的点击事件，蓝色点为鼠标点击位置，offsetX和offsetY所依据的点为该元素左上角位置，这样可以知道鼠标点击在元素的哪个位置
pageX clientX offsetX之间的区别相关推荐
- pageX,clientX,offsetX,layerX的区别
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...
- pageX,clientX,offsetLeft,scrollLeft的区别
pageX,clientX,offsetLeft,scrollLeft的区别 1.pageX / pageY pageX / pageY的值为鼠标相对于document的距离,即网页左上角的位置 2. ...
- clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试
clientX,offsetX,pageX,screenX的异同 对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼,首先我们从文字上解释它的异同 首先我们要明确对于浏览器而言,它的X还 ...
- 区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
- screenX、client X、pageX、offsetX、layerX
screenX, client X screenX: 鼠标在屏幕中的水平坐标 client X: 鼠标在客户端区域(浏览器可视区域)的水平坐标,不论页面是否有水平滚动 pageX 相对于整个文档的x( ...
- FPGA与ASIC：它们之间的区别以及使用哪一种？
FPGA与ASIC:它们之间的区别以及使用哪一种? FPGA Vs ASIC: Differences Between Them And Which One To Use? VL82C486 Sing ...
- Python 应用领域以及版本之间的区别
Python 应用领域以及版本之间的区别 一．Python应用领域 Python+人工智能,给你更多研究方向选择! 企业级综合实战项目,集六大前沿技术为一体 二. Python 2与Python 3的 ...
- java中separator_java - File.separator和路径中的斜杠之间的区别
java - File.separator和路径中的斜杠之间的区别 在Java Path-String中使用/和普通的File.separator有什么区别? 与双反斜杠相比,/平台独立似乎不是原因, ...
- 机器学习、数据科学、人工智能、深度学习和统计学之间的区别！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货 作者:Vincent Granville,来源:机器之心 在这篇文章中, ...
最新文章
- mysql case函数吗_mySQL case函数
- 交叉渡线道岔规格_交叉渡线铁路道岔的型号及选用
- ROS笔记（39） 串口配置
- 修改CentOS系统的默认启动级别
- 二叉树 | 根据前序、后序生成中序
- python中的struct模块
- 01_Navicat的快捷键学习
- python orm开发模型_Python ORM框架Peewee初探【二】创建或者生成模型
- MVC3+EF4.1学习系列(五)----- EF查找导航属性的几种方式
- 从 “C语言之父” 那里学到的一些好东西！分享给你~
- 基础的重要性(程序员之路)
- 第二人生的源码分析(三十八)构造一个消息包并发送
- 5GC 网元AMF、SMF、UPF、PCF、UDM等介绍
- L1, L2以及smooth L1 loss
- Apache Ozone0.4.0调研
- 浏览器中网址访问过程详解
- 带你走进API安全的知识海洋
- 让机器学习助力医疗领域
- GICv3软件overview手册之GICv4对虚拟LPI的直接注入（1）
- RB-tree(红黑树)