文档章节

What is the difference between screenX/Y, clientX/

何金池
 何金池
发布于 2015/11/11 10:31
字数 291
阅读 36
收藏 0

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>


本文转载自:http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and...

共有 人打赏支持
何金池
粉丝 13
博文 39
码字总数 7103
作品 0
深圳
前端工程师
私信 提问
深刻认识clientX,offsetX,screenX

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自...

一颗星星变了心
2014/07/29
0
0
clientX offsetX pageX screenX

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别 2014-09-14 0 个评论 来源:ruoyiqing的专栏 收藏 我要投稿 总是会被javascript的event对象的clientX,offsetX,scr...

LorinLuo
2015/04/28
0
0
pageX,clientX,offsetX,layerX的那些事

在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个至关重要的元...

utopia1985
2013/01/13
0
0
screenX(Y),clientX(Y)和pageX(Y),offsetX(Y)和layerX(Y)

http://blog.csdn.net/lzding/article/details/45437707 event.screenX(Y) 即鼠标相对于显示器屏幕左上角x,y坐标。标准事件属性,所有浏览器都支持 event.clientX(Y) 即鼠标相对于浏览器窗口...

joker-yjc
2018/01/15
0
0
clientX,screenX,pageX,offsetX的区别

<script>function mouseDown(ev){ev=ev||window.event;alert("page rn X:"+ev.pageX+" Y: "+ev.pageY+"rn client rn X:"+ev.clientX+" Y: "+ev.clientY+"rn screen rn X:"+ev.screenX+" Y: "......

zwjjap
2015/11/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

cxf框架的介绍

小小小施爷
5分钟前
0
0
35K成功入职:蚂蚁金服面试Java后端经历!

上个月4号通过阿里工作的学长进行内推,7天简历评估,11号接到电话面试,尽管猝不及防回答仓促,但好在前期准备充分,通过。3天后进行现场面试,通知时间为早上10点。当日设了七点闹钟,结果...

别打我会飞
5分钟前
0
0
【HAVENT原创】让 IE6 ~ IE8 浏览器也支持 map 和 filter 方法

Array.prototype 扩展可以让 IE6 ~ IE8 浏览器也支持 map 的方法: if (typeof Array.prototype.map != "function") { Array.prototype.map = function (fn, context) { var arr = [......

HAVENT
6分钟前
0
0
SMSSDK的Unity3D的两种集成方式

SMSSDK的Unity3D插件主要为用户提供了两种集成的方式,一种是通过桥接文件直接调用SMSSDK的原生API,另外一种是集成SMSSDK_Demo中的UI,这两种方式的集成,方便用户根据自己的需要进行不同的...

佳妮
15分钟前
0
0
云计算、大数据、编程语言学习指南下载,100+技术课程免费学!这份诚意满满的新年技术大礼包,你Get了吗?

开发者认证、云学院、技术社群,更多精彩,尽在开发者会场 近年来,新技术发展迅速。互联网行业持续高速增长,平均薪资水平持续提升,互联网技术学习已俨然成为学生、在职人员都感兴趣的“业...

zhaowei121
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部