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. 找bug的过程

    关于昨天程序出差我找bug的过程记录 昨天才程序 https://www.cnblogs.com/pythonywy/p/11006273.html ├── xxxx │ ├── src.py │ └ ...

  2. [PTA] 数据结构与算法题目集 6-1 单链表逆转

    List Reverse(List L) { List p, q; p = L; q = L; L = NULL; while (p) { p = p->Next; q->Next = L ...

  3. Java中常见的异常类型

    一. Java中常见的异常类 异常类 说明 ClassCastException 类型准换异常 ClassNotFoundException 未找到相应类异常 ArithmeticException ...

  4. hdu6383 p1m2(二分答案)

    p1m2 题目传送门 解题思路 因为x都是非负数,且每一次操作其实就是把总和减少了1,所以可以得出最后都可以到达稳定.最后稳定的数的下界是0,最大也不会超过其初始数的最大值,所以可以用二分答案来求解. ...

  5. IrisSkin2.dll 添加皮肤

    使用说明:把控件拖到你的form上,只需一行代码,即可实现整个form包括其所有控件的皮肤的更换,总共有几十套皮肤供使用,非常方便.省去你设计开发软件皮肤系统的时间和精力.全部源代码就一行: skin ...

  6. 【Python3爬虫】当爬虫碰到表单提交，有点意思

    一.写在前面 我写爬虫已经写了一段时间了,对于那些使用GET请求或者POST请求的网页,爬取的时候都还算得心应手.不过最近遇到了一个有趣的网站,虽然爬取的难度不大,不过因为表单提交的存在,所以一开始还 ...

  7. 【iOS】receiver type *** for instance message is a forward declaration

    错误原因:没有引入相关的头文件 http://stackoverflow.com/questions/8815200/receiver-type-for-instance-message-is-a-f ...

  8. html以前没有学到的标签

    <q>标签,短文本引用 <blockquote>标签,长文本引用 <address>标签,为网页加入地址信息 <code>标签,插入单行代码 <p ...

  9. mcrp 对接软件换

     如何配置UniMRCP Server的启动选项 UniMRCP Server的配置参数,比如:ASR server IP 地址.输出目录. 在哪儿设置这些自定义参数,在插件中如何获取这些参数. 修改 ...

  10. 解决报错：类型“System.Object”在未被引用的程序集中定义。必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”的引用

    Razor视图引擎中,使用部分视图编译报错 类型“System.Object”在未被引用的程序集中定义.必须添加对程序集“System.Runtime, Version=4.0.0.0, Cultur ...