说到底， 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. （16）zabbix history trends历史与趋势数据详解

    1. 保留历史数据 我们可以通过如下方式来设置保留数据的时长:监控项(item)配置里匹配更新监控项(item)设置Housekeeper tasksHousekeeper会定期删除过期的数据.如果数 ...

  2. 怎么用js写一个类似于百度输入框的搜索插件

    PS:这次做的这个小插件只是在前端实现,并没有经过数据库.需要用到的的框架:1.bootstrap.css的样式 2.Vue.js 最终效果如下: JS部分: $(window).click(func ...

  3. Linux下基于LVM调整分区容量大小的方法

    Linux下调整分区容量大小的方法(适用于centos6-7) 说明:以下方法均使用centos6.9和centos7.4进行测试. Centos6分区容量调整方法 1.web分区空间不足,新添加一块 ...

  4. Vue 2.0 项目在IE下显示空白

    新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy ...

  5. A Fast and Easy to Use AES Library

    http://www.codeproject.com/Articles/57478/A-Fast-and-Easy-to-Use-AES-Library Introduction EfAesLib i ...

  6. Django项目 生成依赖包

    生成依赖包文件 requirements.txt,最好用 pip3, 如果有 python2 的话会默认使用 py2 的 pip pip3 -r freeze > requirements.tx ...

  7. Makefile学习（二）----生成静态库文件

    Lunix下编译静态库文件: .o后缀文件:编译生成的中间代码文件: .a后缀文件:静态库文件,编译的时候会合到可执行程序中,文件比较大: .so后缀文件:动态库文件,只是一个指向,不会合到可执行程序 ...

  8. python 四——线程、进程、协程

    内容概要 1.进程与线程优.缺点的比较 2.适用情况 3.线程 线程的创建 setDaemon join event RLock 队列 4.进程 创建进程 setDaemon join 线程与进程,数 ...

  9. 大数据学习——sql练习

    1. 现有如下的建表语句和数据: 建表语句 create table student(Sno int,Sname string,Sex string,Sage int,Sdept string)row ...

  10. TOJ 2353: Billiard

    数学?计算几何?物理?这个还是很轻松的. 353: Billiard  Time Limit(Common/Java):1000MS/10000MS     Memory Limit:65536KBy ...