先总结下区别:

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. 关于app

    刷新功能的话只需要在前端重新调用一下原来的方法即可

  2. 快速切题CF 158B taxi 构造 && 82A double cola 数学观察 难度:0

    实在太冷了今天 taxi :错误原因1 忽略了 1 1 1 1 和 1 2 1 这种情况,直接认为最多两组一车了 2 语句顺序错 double cola: 忘了减去n的序号1,即n-- B. Taxi ...

  3. DTD文档说明

    模块说明 l  元素 l  属性 l  实体 l  PCDATA(parsed character data) PCDATA 是会被解析器解析的文本.这些文本将被解析器检查实体以及标记. l  CDA ...

  4. eclipse SVN 上传.so库文件

    eclipse SVN提交代码的时候,是自动忽略.so库文件的.用下面所说的操作后,.so库文件右下角的图标会变成一个蓝色的+号的图标,这样就可以提交.so文件了 选择要上传的.so文件,右键 ——& ...

  5. SVM大致思路整理

    (一)线性可分 我们忽略建立目标函数的过程,直接写出目标函数. 原问题: 首先,我们得到了目标函数: 这是一个凸优化问题,直接可以用软件可以求解: 对偶问题: 原问题根据一系列的变换,可写成: 满足某 ...

  6. Java第七次作业--图形用户界面

    Deadline: 2017-5-11 23:00 一.学习要点 认真看书并查阅相关资料,掌握以下内容: 了解GUI开发的相关原理和技巧 熟悉Swint组件的使用 理解事件处理模型 二.作业要求 发布 ...

  7. 《DSP using MATLAB》Problem 3.2

    1.用x1序列的DTFT来表示x2序列的DTFT 2.代码: %% ------------------------------------------------------------------ ...

  8. 《DSP using MATLAB》Problem 2.5

    2.代码: %% ------------------------------------------------------------------------ %% Output Info abo ...

  9. CH1808 Milking Grid

    题意 POJ2185 数据加强版 描述 Every morning when they are milked, the Farmer John's cows form a rectangular gr ...

  10. test20181019 B君的第三题

    题意 B 君的第三题(urumqi) 题目描述 风雨如晦,鸡鸣不已. B 君最近在研究自己的学长都在做什么工作,每个学长属于一个公司. B 君会获得一些信息,比如x 和y 在相同公司,x 和y 在不同 ...