说到底， 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. （13）zabbix External checks 外部命令检测

    1.  概述 zabbix server运行脚本或者二进制文件来执行外部检测,外部检测不需要在被监控端运行任何agentd item key语法如下: ARGUMENT DEFINITION scri ...

  2. （12）zabbix agent 类型所有key

    zabbix服务器端通过与zabbix agent通信来获取客户端服务器的数据,agent分为两个版本,其中一个是主动一个是被动,在配置主机我们可以看到一个是agent,另一个是agent(activ ...

  3. 五分钟入门 Dingo API

    基于 https://laravel-china.org/doc... 文档更简洁的描述Dingo,直戳重点,注重实践 Django-Book 概述 Dingo API帮助您轻松快速地构建自己的API ...

  4. Python中单元测试出错了，会怎么样？

    在上一篇中,我们看到了单元测试正常通过时的情况,如果我们边修改一下要测试的函数,然后再运行单元测试,会出现什么情况. 原say_hello_name.py def hello_name(name): ...

  5. sql优化工具--美团SQLAdvisor

    美团点评SQL优化工具SQLAdvisor开源 介绍 在数据库运维过程中,优化 SQL 是 DBA 团队的日常任务.例行 SQL 优化,不仅可以提升程序性能,还能够降低线上故障的概率. 目前常用的 S ...

  6. .NET中常见的加解密方式

    在互联网普及的初期,人们更关注单纯的连接性,以不受任何限制地建立互联网为最终目的.正如事情都具有两面性,互联网的便捷性给人们带来了负面问题,计算机病毒的侵害.信息泄露.网络欺诈等利用互联网的犯罪行为日 ...

  7. java 获取音频文件时长

    需要导入jar包:jave 1.0.2 jar 如果是maven项目,在pom.xml文件中添加: <dependency> <groupId>it.sauronsoftwar ...

  8. xtu数据结构 C. Ultra-QuickSort

    C. Ultra-QuickSort Time Limit: 7000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java ...

  9. 九度oj 题目1130：日志排序

    题目描述: 有一个网络日志,记录了网络中计算任务的执行情况,每个计算任务对应一条如下形式的日志记录:“hs_10000_p”是计算任务的名称,“2007-01-17 19:22:53,315”是计算任 ...

  10. BZOJ 3238 [Ahoi2013]差异 ——后缀自动机

    后缀自动机的parent树就是反串的后缀树. 所以只需要反向构建出后缀树,就可以乱搞了. #include <cstdio> #include <cstring> #inclu ...