说到底， pageY, clientY, screenY的计算，就是要找到参考点， 它们的值就是： 鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离

stackoverflow上面有个回答，讲解的非常清晰。

offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document

  1. // rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
  2. var rect = obj.getBoundingClientRect();

https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

　　

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Canvas Drag and Drop Test</title>
  6. </head>
  7. <body>
  8. <style>
  9.     .div1{
  10.         height: 3000px;
  11.         background-color: yellow;
  12.     }
  13.     .div2{
  14.         height: 400px;
  15.         background-color: lightsalmon;
  16.     }
  17.     .div3{
  18.         width: 200px;
  19.         height: 200px;
  20.         background-color: lightblue;
  21.     }
  22. </style>
  23. <div class="div1">
  24.     <div class="div2">
  25.         <div class="div3">
  26.  
  27.         </div>
  28.     </div>
  29. </div>
  30. <script>
  31. 	document.getElementsByClassName('div3')[0].addEventListener('mousedown', function(e){
  32. 		console.log("pageY", e.pageY);
  33. 		console.log("clientY", e.clientY);
  34. 		console.log("screenY", e.screenY);
  35. 	})
  36. </script>
  37. </body>
  38. </html>

　　

---------------------------------------------------------------------------------------------------------------------------------------

In JavaScript:

pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical "css pixels" a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.

pageX and pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.

screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.

clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.

For a visual on which browsers support which properties:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools has an online Javascript interpreter and editor so you can see what each does

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function show_coords(event)
  6. {
  7.   var x=event.clientX;
  8.   var y=event.clientY;
  9.   alert("X coords: " + x + ", Y coords: " + y);
  10. }
  11. </script>
  12. </head>
  14. <body>
  16. <p onmousedown="show_coords(event)">Click this paragraph,
  17. and an alert box will alert the x and y coordinates
  18. of the mouse pointer.</p>
  20. </body>
  21. </html>

彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。的更多相关文章

  1. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  2. Javascript中的事件对象和事件类型

    接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...

  3. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  4. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序:

  5. 理解Javascript中的事件绑定与事件委托

    最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   ...

  6. javaScript中的事件对象event

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  7. 理解JavaScript中的事件轮询

    原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...

  8. JavaScript 中的事件对象（读书笔记思维导图）

    在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含 ...

  9. javaScript中的事件对象event是怎样

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

随机推荐

  1. input标签内容改变触发的事件

    原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...

  2. biological clock

    '''this application aimed to cauculate people's biological block about emotional(28), energy(23),int ...

  3. shell-code-2-传参

    #在执行shell脚本时,带参数,如./test.sh 1 2 3,则在脚本test.sh内,参数表示为$n的形式,$1为第一个参数,以此类推. echo "第一个参数为:$1"; ...

  4. '>>' should be '> >' within a nested template argument list

    在编译关于opencv相机标定的工程的时候出现了这个问题 vector<vector<Point3f>>  objectPoints;  error: 'objectPoint ...

  5. PAT Basic 1067

    1067 试密码 当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码(长度不超过 20 ...

  6. Python小课题练习作业

    作业一: 利用*字典*输出目录,可以选择目录进入,可以回退.退出! #conding:utf8 menu = {'北京':{'昌平':{'沙河':{'昌平妇幼',}},'海淀':{'海淀一区':{'海 ...

  7. BRVAH（让RecyclerView变得更高效）（1）

    本文来自网易云社区 作者:吴思博 对于RecyclerView, 我们重复编写着那一个又一个的列表界面,有的要分组,有的要添加广告头部.有的要不同类型item排列.等等需求,主要代码有大部分是重复的, ...

  8. Java web 服务启动时Xss溢出异常处理笔记

    本文来自网易云社区 作者:王飞 错误日志 错误日志要仔细看,第一行不一定就是关键点,这个错误出现的时候,比较靠后,其中关键行就是下面这句. Caused by: java.lang.IllegalSt ...

  9. C#Windows服务安装

    1,做好windows服务后,生成 一下,然后在项目目录中找到bin文件夹下的Debug文件夹,文件夹下有文件xxxx.exe 2,然后在C:\Windows\Microsoft.NET\Framew ...

  10. 牛客网Wannafly模拟赛

    A矩阵 时间限制:1秒 空间限制:131072K 题目描述 给出一个n * m的矩阵.让你从中发现一个最大的正方形.使得这样子的正方形在矩阵中出现了至少两次.输出最大正方形的边长. 输入描述: 第一行 ...