pageX,clientX,screenX,offsetX区别
鼠标相对于整个页面的X/Y坐标。
注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
特别说明:IE不支持!
clientX/clientY:
事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。
screenX/screenY
鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
offsetX/offsetY:
得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:
特别说明:只有IE支持!相当于IE下的pageX,pageY。
e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop = e.pageY
pageX,clientX,screenX,offsetX区别的更多相关文章
- pageX, clientX ,screenX, offsetX, layerX, ,x的区别
事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
- pageX,clientX,offsetX,layerX的区别
pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...
- clientX,screenX,pageX,offsetX的异同 【转载】
首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000 ...
- 【clientX,offsetX,screenX】 【scrollWidth,clientWidth,offsetWidth】的区别
一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- pageX/pageY,screenX/screenY,clientX/clientY的差别
pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
随机推荐
- vmware卸载问题
1. VMware版本问题:http://www.wuji8.com/meta/15866846.html2. VMware卸载问题:http://www.veryhuo.com/a/view/716 ...
- java 基础之概念
1:栈(Stack) 先进后出(邮政模拟例) 2:队列(Queue) 先进先出(排队购票)
- [原]JavaScript总结
匿名函数 var ff = function () { return 'hhqybsl'; }; var result = ff(); ...
- Windows下MongoDB安装及创建用户名和密码
下载MongoDB的安装文件https://www.mongodb.com/download-center#community,选择合适的版本(注:本人选择的是3.2.6) 下载完MongoDB.ms ...
- Django: 配置和静态文件
运行django-admin.py startproject [project-name] 命令会生成一系列文件,在django 1.6版本以后的settings.py文件中有以下语句: # Buil ...
- elisp
cons cell? 构建内存对象! 通过寄存器的基地址car和偏移地址cdr来--寻址内存对象,我是这样理解的. http://wiki.dourok.info/doku.php/%E5%B7%A5 ...
- java HTTP请求 DefaultHttpClient is deprecated
最近在使用Apache的httpclient的时候,maven引用了最新版本4.3,发现Idea提示DefaultHttpClient等常用的类已经不推荐使用了,之前在使用4.2.3版本的时候,还没有 ...
- 使用GDB调试Android NDK native(C/C++)程序-转
最 近写了些需要跨平台兼容的C++库,Android是其中需要兼容的平台之一.区别于Windows,Mac中功能强大的IDE环境,官方并没有为 Android ndk提供太多的支持.因此,尝试了下通过 ...
- 强制删除sql用户链接
SELECT 'alter system kill session '''||sid||','||serial#||''';' FROM v$session WHERE username='USER' ...
- Android音频系统之AudioFlinger(一)
1.1 AudioFlinger 在上面的框架图中,我们可以看到AudioFlinger(下面简称AF)是整个音频系统的核心与难点.作为Android系统中的音频中枢,它同时也是一个系统服务,启到承上 ...