说到底， 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. python--第一类对象,函数名,变量名

    一 . 第一类对象 函数对象可以像变量一样进行赋值 , 还可以作为列表的元素进行使用 可以作为返回值返回 , 可以作为参数进行传递 def func(): def people(): print('金 ...

  2. Python文件指针与Python函数

    文件内指针移动:f.seek() 强调:只有t模式下read(n),n代表字符的个数,除此以外都是以字节为单位. """ 文件内容:哈哈哈哈 呵呵呵呵 "&qu ...

  3. PAT Basic 1025

    1025 反转链表 给定一个常数K以及一个单链表L,请编写程序将L中每K个结点反转.例如:给定L为1→2→3→4→5→6,K为3,则输出应该为3→2→1→6→5→4:如果K为4,则输出应该为4→3→2 ...

  4. CodeForces 484B 数学 Maximum Value

    很有趣的一道题,题解戳这. #include <iostream> #include <cstdio> #include <cstring> #include &l ...

  5. python基础学习笔记——文件操作

    文件操作 初始文件操作 使用Python来读写文件是非常简单的操作,我们使用open()函数来打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作了 根据打开方式的不同能够执行的操作 ...

  6. Knockout v3.4.0 中文版教程-3-监控-通过监控创建视图模型（下）

    6. 显式订阅监控 你通常不需要手动设置订阅,所以初学者应该跳过这一节. 对于高级用户,如果你想注册自己的订阅来监控通知变化,你可以使用 subscribe函数,比如: myViewModel.per ...

  7. 【08】css sprite是什么,有什么优缺点

    [08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...

  8. python基础-文件和目录

    字符串小练习 >>> s="1a2a3a4a5a" >>> s1=s.split('a') >>> >>> ...

  9. MySQL 2003 [ERROR] /usr/sbin/mysqld: Incorrect key file for table './keyword_search/keyword.MYI'; try to repair it

    今天对一个有四百多万数据的表增加一个功能时,当做数据插入时,显示没有插入,到Linux的log下面查看了发现下面这条错误信息 在stacOver上面找到这句: 存储引擎(MyISAM)支持修复表.你应 ...

  10. Luogu【P1130】红牌(DP)

    欧拉 本蒟蒻第一个自己想出来的DP题 请移步题目链接 调了半天.i从1到n,j从1到m. f[i][j]表示的是第i道工序在第j个小组办完所花的最短时间. 因为要用到上一个状态,而上一个状态要么是同一 ...