clientX,offsetX,screenX,pageX 区别!
先总结下区别:
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
上图!!!!

clientX,offsetX,screenX,pageX 区别!的更多相关文章
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
		
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
 - event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等
		
先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...
 - event对象的clientX,offsetX,screenX,pageX
		
chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...
 - [1]区分event对象中的[clientX,offsetX,screenX,pageX]
		
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...
 - pageX,clientX,offsetX,layerX的区别
		
pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...
 - clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
		
clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106 ...
 - offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
		
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
 - pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解
		
https://www.cnblogs.com/echolun/p/9231760.html
 - jQuery中 pageX,clientX,offsetX,layerX的区别
		
一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...
 
随机推荐
- python3连接MySQL数据库实例
			
#python3连接MySQL实例 import pymysql """导入连接MySQL需要的包,没有安装pymysql需要先安装 使用命令行切换到python的安装路 ...
 - vue router动态路由
			
<div id="#app"> <router-link to="/user/header">路由1</router-link&g ...
 - hdu 3264 09 宁波 现场 E - Open-air shopping malls 计算几何 二分 圆相交面积 难度:1
			
Description The city of M is a famous shopping city and its open-air shopping malls are extremely at ...
 - 升级安装windows8.1以后windowsphone8不能启动虚拟机的办法
			
如果之前在的虚拟机是OK的话,VS2012需要安装update3补丁才可以. 下载地址:http://download.microsoft.com/download/D/4/8/D48D1AC2-A2 ...
 - Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
			
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
 - [Tomcat无法启动]'Starting Tomcat v8.0 Server at localhost' has encountered a problem.
			
运行一个index.jsp,运行提示如下错误:点击服务器 解决办法1: 点击Tomcat服务器,将服务器里的web工程删除掉,再重新运行index.jsp. 解决办法2: 关闭Tomcat,最简单的方 ...
 - 使用Lucene对doc、docx、pdf、txt文档进行全文检索功能的实现
			
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/76273859 本文出自[我是干勾鱼的博客] 这里讲一下使用Lucene对doc. ...
 - Yii在window下的安装方法
			
首先,在http://www.yiichina.com/上下载yii 然后,配置系统环境变量,在win8下,按win+x,找到系统->高级系统设置->环境变量->path 把php的 ...
 - vi/vim使用进阶: 在VIM中使用GDB调试 – 使用vimgdb
			
vi/vim使用进阶: 在VIM中使用GDB调试 – 使用vimgdb << 返回vim使用进阶: 目录 本节所用命令的帮助入口: :help vimgdb 在UNIX系统最初设计时,有一 ...
 - selenium定位元素的8种方法
			
By.id,By.name,By.tagName,By.className,By.linkText,By.partialLinkText,By.xpath,By.cssSelector <a h ...