先总结下区别:

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 区别!的更多相关文章

  1. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  2. event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

    先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...

  3. event对象的clientX,offsetX,screenX,pageX

    chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...

  4. [1]区分event对象中的[clientX,offsetX,screenX,pageX]

    前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...

  5. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  6. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

  7. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  8. pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

    https://www.cnblogs.com/echolun/p/9231760.html

  9. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

随机推荐

  1. 手写DCGAN

    //加上了注释,对pytorch又加深了理解import torch as t from torch import nn from torch.autograd import Variable fro ...

  2. jspf、jsp小记

    jsp页面:

  3. poj3680

    题解: 相邻的建边 每一段建边 然后见一个原点,汇点 代码: #include<cstdio> #include<cmath> #include<cstring> ...

  4. Python基础学习----参数和返回值

    # 函数的参数和返回值 # 4种组合方式 # 1.无参无返 # def methodone(): # 2.无参有返 def methodtwo(): a=10 return a # 3.有参无返 # ...

  5. C++的explicit关键字

    C++程序员对于explicit这个关键字其实不是很熟悉,至少我是如此:原因在于其使用范围不大,而且作用也没有那么大. 但是这不是说明我们的程序中不需要这个关键字,按Google的C++编程规范和Ef ...

  6. addpath

    这个命令见得很多了,一直懒得理他,自己直接加绝对路径.但是,这个破命令出现太多,我改得都掉脾气,写写. 1.  添加路径:addpath('当前路径中的文件夹名1','当前路径下的文件夹名2','当前 ...

  7. 使用阿里云docker加速器

    登陆之后,在docker镜像仓库-加速器可获得专有加速地址. 如何使用Docker加速器 针对Docker客户端版本大于1.10的用户 您可以通过修改daemon配置文件/etc/docker/dae ...

  8. Python的安装和使用ubuntu下

    ubuntu下Python的安装和使用 https://www.cnblogs.com/luckyalan/p/6703590.html ubuntu下Python的安装和使用 1 文章介绍 本文介绍 ...

  9. python3.5 安装 numpy1.14.4

    AMD64 import pip._internal print(pip._internal.pep425tags.get_supported()) WIN32 import pip print(pi ...

  10. mongodb启用Profiling定位问题

    建议使用方法三,最简单且容易查看 一:如果mongodb已经运行了很长时间,此时查看mongod.log很大,没法打开查看相应信息 #ps -ef|grep mongod 找到相应的mongod的进程 ...