说到底， 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. 【java】 field 和 variable 区别及相关术语解释

    Having said that, the remainder of this tutorial uses the following general guidelines when discussi ...

  2. Python9-装饰器进阶-day12

    wapers方法 def wahaha(): ''' sljfldsjflds :return: ''' print('娃哈哈') print(wahaha.__name__) #查看字符串格式的函数 ...

  3. AWK原理及命令和文件输入

    一.awk简介  1.awk是3个姓氏的首字母,代表该语言的3个作者,awk的版本有很多,包括:旧版awk,新版awk(nawk),GNU awk(gawk)等.    awk程序有awk命令,括在引 ...

  4. 【编程工具】Sublime Text3快捷键配置

    我们在使用编译软件时,总是喜欢使用快捷键来方便我们的操作,但有些编译软件不支持快捷键的修改和设置,为了能够更加方便的使用 Sublime Text3,这里我介绍几个 Sublime Text3 设置快 ...

  5. HDU 5527 Too Rich

    Too Rich Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  6. SPOJ-Grid ,水广搜easy bfs

    SERGRID - Grid 一个水广搜我竟然纠结了这么久,三天不练手生啊,况且我快三个月没练过搜索了... 题意:n*m的方格,每个格子有一个数,意味着在此方格上你可以上下左右移动s[x][y]个格 ...

  7. K-D tree入门

    久仰K-D tree大名已久,终于在合适的时候遇见了合适的水题入了坑入了门 K-D tree是什么 K-D tree是什么? 按名字上翻译来就是K维的树,就是一个用来维护K维空间的点的平衡二叉树 K- ...

  8. JMS API学习总结（一）

    三.JMS API简析 顶级接口 P2P Pub/sub 备注 ConnectionFactory QueueConnectionFactory TopicConnectionFactory 基于工厂 ...

  9. jmeter监控linux cpu 内存 网络 IO

    下载地址:http://jmeter-plugins.org/downloads/all/ PerfMon: 用来监控Server的CPU.I/O.Memory等情况 ServerAgent-2.2. ...

  10. Jackson工具类（各种转换）

    首先要在项目中引入jackson的jar包(在此不做说明) 下面直接上代码 public class JacksonUtils { private final static ObjectMapper ...