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

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

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

// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height

var rect = obj.getBoundingClientRect();

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

　　

<!doctype html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Canvas Drag and Drop Test</title>

</head>

<body>

<style>

    .div1{

        height: 3000px;

        background-color: yellow;

    }

    .div2{

        height: 400px;

        background-color: lightsalmon;

    }

    .div3{

        width: 200px;

        height: 200px;

        background-color: lightblue;

    }

</style>

<div class="div1">

    <div class="div2">

        <div class="div3">

        </div>

    </div>

</div>

<script>

	document.getElementsByClassName('div3')[0].addEventListener('mousedown', function(e){

		console.log("pageY", e.pageY);

		console.log("clientY", e.clientY);

		console.log("screenY", e.screenY);

	})

</script>

</body>

</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

<!DOCTYPE html>

<html>

<head>

<script>

function show_coords(event)

{

  var x=event.clientX;

  var y=event.clientY;

  alert("X coords: " + x + ", Y coords: " + y);

}

</script>

</head>

<body>

<p onmousedown="show_coords(event)">Click this paragraph,

and an alert box will alert the x and y coordinates

of the mouse pointer.</p>

</body>

</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. UNIX环境C语言进程通信

    一.信号管理 1.函数signal signal函数是UNIX系统信号机制最简单的接口 #include <signal.h> typedef void (*sighandler_t)(i ...

  2. cvs 文件无法上传debug

    当时文件始终上传不成功时(一般先update后commit): cvs update filename report:move away filename ,it is in the way cvs ...

  3. Python9-模块2-序列化-day20

    序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 序列就是字符串 序列化的目的1.以某种存储形式使自定义对象持久化:2.将对象从一个地方传递到另一个地方.3.使程序 ...

  4. python常见陷阱

    copy to https://pythonguidecn.readthedocs.io/zh/latest/writing/gotchas.html 大多数情况下,Python的目标是成为一门简洁和 ...

  5. 【01】国内外git托管平台（总结by魔芋）

    [01]国内git托管平台介绍 01, github:代码协作平台,协同开发. 代码托管平台. git:项目版本控制系统 02, 最好的托管方式: github 关闭或小众的托管方式: geakit( ...

  6. python的re模块常用方法

    正则表达式模式 模式字符串使用特殊的语法来表示一个正则表达式: 字母和数字表示他们自身.一个正则表达式模式中的字母和数字匹配同样的字符串. 多数字母和数字前加一个反斜杠时会拥有不同的含义. 标点符号只 ...

  7. 大数据学习——本地安装redis

    下载安装包 https://github.com/MicrosoftArchive/redis 下载后解压 运行cmd 然后到redis路径 运行命令: redis-server redis.wind ...

  8. Caffe 编译： undefined reference to imencode()

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52150781 整理之前编译工程中遇到的 ...

  9. 九度oj 题目1140：八皇后

    题目描述: 会下国际象棋的人都很清楚:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8 * 8个方格),使它们谁也不能被吃掉!这就是著名的八皇后问题. 对于某个满足要求的 ...

  10. [luoguP1131] [ZJOI2007]时态同步（贪心）

    传送门 显然是一棵树. 又显然一段一段地增加比较优. 我们可以dfs,并且尽量把每一个节点所有子树中所有节点的时间增加到一样. #include <vector> #include < ...