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的父元素的左上角。

图1中粉色DIV并没有设置position，所以默认为static，此时layerX/Y的原点为上层父元素灰色DIV的左上角。

图2中粉色DIV设置了position为relative，所以此时layerX/Y的原点为粉色DIV的左上角。

pageX/Y、clientX/Y区分

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

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

总体理解一下

其中有一个我很在意的问题，为什么pageY、offsetY、clientY、layerY总有一个2px或1px的多余？

因为我可得出鼠标相对于触发事件元素的原点，现在设置为中心点（25,25），那么从layerY-offsetY=border+粉色文字所占大小=>文字所占高度为21px。

所以猜测难道是文字大小所导致的？

于是设置文字大小。

计算图1灰色文字所占高度+文档窗口左上角到灰色DIV的高度=192-71=121px；

图1粉色文字所占高度=21px

因为两个文字大小一致，所以文档窗口左上角到灰色DIV的高度=121-21=100px；

设置图2灰色DIV文字大小为25px，粉色DIV文字大小为30px。

计算灰色文字所占高度+文档窗口左上角到灰色DIV的高度=223-90-100=33px

粉色文字所占高度=90-25-25=40px

经过多此实验和计算。。发现Chrome每次修改文字大小，文字所占高度没有规律。。

特别的13px大小文字占高17px，12px文字大小占高16px，14px占高19，15px占高20，16px占高21，20占26，30占40，40占52，50占66，60占79。。。

（我也不知道原理是什么，Firefox和Chrome数值还不一样，因为Firefox不限制文字大小，Chrome最小文字大小为12px，所以文字最小占高19px）

测试代码如下

<script type="text/javascript">

    $(document).ready(function () {

        $("#test").click(function (e) {

            console.log(e);

            $("#pX").html(e.pageX);

            $("#pY").html(e.pageY);

            $("#oX").html(e.offsetX);

            $("#oY").html(e.offsetY);

            $("#cX").html(e.clientX);

            $("#cY").html(e.clientY);

            $("#sX").html(e.screenX);

            $("#sY").html(e.screenY);

            $("#lX").html(e.originalEvent.layerX);

            $("#lY").html(e.originalEvent.layerY);

        });

    })

</script>

<style>

    *{

        margin: 0px;

        padding: 0px;

    }

    #demo{

        background-color: #777777;

        height: 400px;

    }

    #data{

        position: absolute;

        top:100px;

        left: 500px;

        width: 200px;

        height: 300px;

        background-color: #1b6d85;

    }

    #test{

        width: 50px;

        height: 50px;

        border: 25px solid darkred;

        background-color: #985f0d;

        top:100px;

        left: 100px;

        margin: 0 auto;

    }

    #testCContainer{

        width: 300px;

        height: 300px;

        position: absolute;

        top: 100px;

        left: 100px;

        background-color: #2b333f;

    }

    #testContainer{

        width: 150px;

        height: 150px;

        background-color: #ce8483;

        margin: 0 auto;

        position: relative;

    }

</style>

<body>

<div id="demo"></div>

    <div id="testCContainer">

    absolute300*300

    <div id="testContainer">

        rela150*150

        <div id="test"></div>

    </div>

</div>

<div id="data">

    pageX:<span id="pX"></span><br/>

    pageY:<span id="pY"></span><br/>

    offsetX:<span id="oX"></span><br/>

    offsetY:<span id="oY"></span><br/>

    clientX:<span id="cX"></span><br/>

    clientY:<span id="cY"></span><br/>

    screenX:<span id="sX"></span><br/>

    screenY:<span id="sY"></span><br/>

    layerX:<span id="lX"></span><br/>

    layerY:<span id="lY"></span>

</div>

</body>

</html>

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

  1. 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...

  2. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

  3. screenX、clientX、pageX的区别

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...

  4. pageX、pageY全兼容

    pageX.pageY全兼容 var pos=function(o,x,y,event){var posX=0,posY=0;var e=event||window.event;if(e.posX|| ...

  5. ev的offsetX,pageX,clientX和screenX

    event.offsetX.event.offsetY(相对事件发生的具体元素左上角的定位) 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性 ...

  6. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  7. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。

    一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...

  9. 教你一招：解决win10/win8.1系统在安装、卸载软件时出现2502、2503错误代码的问题

    经常遇到win10/win8.1系统在安装.卸载软件时出现2502.2503错误代码的问题. 解决办法: 1.打开任务管理器后,切换到“详细信息”选项卡,找到explore.exe这个进程,然后结束进 ...

随机推荐

  1. 全栈工程师知识点汇总——html5（上）

    一.HTML5 1.新特性: 1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ... 2. 新表单元 ...

  2. Codeforces比赛注意事项（英语比较好，能翻译题目的可以跳过此文章）

    由题目可知,这篇文章是讲翻译文章的. 当然不是教英语啦 其实cf的比赛对于本蒟蒻最大的挑战就是翻译题目啦 所以我比赛时只能靠各种翻译器去无耻地翻译,然后读中文. 目前较好的翻译器有:百度,谷歌,有道. ...

  3. Java集合系列(一)：集合的定义及分类

    1. 集合的定义 什么是集合呢? 定义:集合是一个存放对象的引用的容器. 在Java中,集合位于java.util包下. 2. 集合和数组的区别(面试常问) 提到容器,就会想起数组,那么集合和数组的区 ...

  4. Hadoop自学系列集(四) ---- Hadoop集群

    久等了,近期公司比较忙,学习的时间都没有啊,到今日才有时间呢!!!好了,下面就跟着笔者开始配置Hadoop集群吧. hosts文件和SSH免密码登录配置好了之后,现在进入Hadoop安装目录,修改一些 ...

  5. 【Java】Exception thrown by the agent : java.rmi.server.ExportException: Port already in use: 1099

    详细信息如下: Error: Exception thrown by the agent : java.rmi.server.ExportException: Port already in use: ...

  6. Ubuntu中修改默认开机项

    1首先,按住Ctrl+Alt+t打开终端 2输入cd /etc/default 3输入sudo sudo nano grub 并按照提示输入密码 4在我们开机的时候,可以看到自己想要默认的开机项是多少 ...

  7. 从windows10迁移到Linux Deepin

    如题, 这几天从windows系统迁移到deepin的linux系统花了很多时间, 以致最近都没时间来博客园.现在将这几天的成果分享出来, 顺便也做个记录.先不多说, 上一张新系统界面. 其实在装de ...

  8. 无法正常卸载pr

    控制面板找不到pr和ps,根本无法卸载,我试过官方工具没用,也试过ccleaner,也检测不到?

  9. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

  10. luogu2279_[HNOI2003]消防局的设立 贪心

    传送门 不需要树形dp 关于深度排序 当前节点到最近的消防局(f[u])>2时要建新的与u的上面(v)的上面(w) 同时w的上面和上面的上面也要更新f值 #include <bits/st ...