offsetX、clientX、screenX、pageX、layerX

pageX/Y

相对于文档窗口左上角

offsetX/Y

相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值。

(测试了IE11、Opera54.0.2952.71、Chrome68.0.3423.2、Firefox61.0.2中offset均不含边框的宽度)

clientX/Y

相对于可视窗口左上角

screenX/Y

相对于屏幕左上角

layerX/Y

相对于position为absolute或relative的父元素的左上角

pageX/Y、clientX/Y

当可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY。 但是如果缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变,但文档窗口左上角位置发生变化。

此时文档窗口的原点如图中红线所示在页面的上方。

总体理解一下

原文地址:https://www.cnblogs.com/huangcy/p/9475185.html

时间: 2024-08-02 19:27:25

offsetX、clientX、screenX、pageX、layerX的相关文章

关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

关于offsetX.offsetY.clientX.clientY.pageX.pageY.screenX.screenY的区别 offsetX.offsetY: 鼠标相对于事件源元素(srcElement)的X,Y坐标 clientX.clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条. pageX.pagey: 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广

pageX、clientX、screenX、offsetX、layerX、x

e.pageXe.layerXe.offsetXe.clientXe.x 属性: 测试浏览器: FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9 测试代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm

js event对象的clientX,offsetX,screenX和pageX的区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非

下载-深入浅出Netty源码剖析、Netty实战高性能分布式RPC、NIO+Netty5各种RPC架构实战演练三部曲视频教程

下载-深入浅出Netty源码剖析.Netty实战高性能分布式RPC.NIO+Netty5各种RPC架构实战演练三部曲视频教程 第一部分:入浅出Netty源码剖析 第二部分:Netty实战高性能分布式RPC 第三部分:NIO+Netty5各种RPC架构实战演练

bos 第4 (区域excel批量导入、区域通用分页查询、分区的添加、分区多条件分页查询、分区导出excel)

BOS项目笔记 第4天 今天内容安排: 1.区域批量导入功能 jQuery OCUpload(一键上传插件).apache POI.pinyin4j 2.实现区域的分页查询 3.对分页代码重构 4.添加分区(combobox下拉框) 5.分区的组合条件分页查询 6.分区数据导出功能 1. 区域数据批量导入功能 1.1 一键上传插件使用 ajax不能做文件上传. 第一步:在jsp页面中引入插件的js文件 <script type="text/javascript" src=&quo

Python学习笔记 之 递归、二维数组顺时针旋转90&#176;、正则表达式

递归.二维数组顺时针旋转90°.正则表达式 1.   递归算法是一种直接或间接调用自身算法的过程. 特点: 递归就是在过程或函数里调用自身 明确的递归结束条件,即递归出口 简洁,但是不提倡 递归次数多容易造成栈溢出 要求: 每次调用递归规模上有所减小 前一次为后一次做准备 规模较小时必须直接给出解答而不再进行递归调用 例子:递归实现二分法 1 def searchMyData(mydate,a1): 2 mid = int(len(mydate)/2) 3 if mid >= 1: 4 if m

Java虚拟机6:内存溢出和内存泄露、并行和并发、Minor GC和Full GC、Client模式和Server模式的区别

http://www.cnblogs.com/xrq730/p/4839245.html 前言 之前的文章尤其是讲解GC的时候提到了很多的概念,比如内存溢出和内存泄露.并行与并发.Client模式和Server模式.Minor GC和Full GC,本文详细讲解下这些概念的区别. 内存溢出和内存泄露的区别 1.内存溢出 内存溢出指的是程序在申请内存的时候,没有足够大的空间可以分配了. 2.内存泄露 内存泄露指的是程序在申请内存之后,没有办法释放掉已经申请到内存,它始终占用着内存,即被分配的对象可

JavaScript - 简介、在HTMl中使用JavaScript、基本概念

1. JavaScript简介 JavaScript历史回顾 JavaScript是什么 JavaScript与ECMAScript的关系 JavaScript的不同版本 一言概之,略. 2. 在HTML中使用JavaScript 要把JavaScript放到网页中,就得涉及Web的核心语言 -- HTML.当初开发JavaScript的时候,要解决的一个重要问题就是让JavaScript与HTML页面共存,并且不影响页面在浏览器中的呈现效果.最终决定为Web增加统一的脚本支持. 2.1 <sc

Probabilistic Graphical Models:一、Introduction and Overview(1、Overview and Motivation)

一.PGM用来做什么 1.  医学诊断:从各种病症分析病人得了什么病,该用什么手段治疗 2.  图像分割:从一张百万像素级的图片中分析每个像素点对应的是什么东西 两个共同点:(1)有非常多不同的输入变量:(2)对于算法而言,结果都是不确定的 二.PGM各代表什么 1.  Models 2.  Probabilistic (1)概率:设计model即是为了分析一些不确定的东西(uncertainty) (2)Uncertainty的来源: (3)概率在模型表达上的优势 3.  Graphical