事件对象event的位置属性，这些参数比较容易混淆

1. pageX,pageY ：IE不识别的，鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化，其实就是clientY+scrollTop，参考点是页面

2. clientX ,clientY: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. 这是一个变化的，是以浏

　　　　　　　　　 览器左上角为参考点

3. screenX, screenY : 鼠标相对于屏幕的位置，跟浏览器没有关系，不管浏览器多大，是以计算机屏幕为参考点的

4. offsetX,offsetY : FF不识别的,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值,是以event对象为参考点

5. layerX,layerY : IE不识别的，如果event元素没有相对定位和绝对定位的话，相当于pageX,pageY,如果有定位属性的话，相当于border+offsetX,

6. x,y： FF不识别的，IE是相等于offsetX，chrome相等于clientX

pageX, clientX ,screenX, offsetX, layerX, ,x的区别的更多相关文章

  1. pageX,clientX,screenX,offsetX区别

    pageX/pageY:鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了.特别说 ...

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

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

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

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

  4. javascript 中 x offsetX clientX screenX pageX的区别

    在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...

  5. clientX,screenX,pageX,offsetX的异同 【转载】

    首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000 ...

  6. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  7. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  8. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

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

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

随机推荐

  1. P==NP？？

    注:基础知识见下方 下面是关于P==NP ???  一些讨论,挺好玩的. 1. 首先强调一下数学上还没有证明这个问题!但是我们看看其他角度来看这个问题. 其次,心理上来说,要是可以证明P==NP那么早 ...

  2. POJ 2480 Longge's problem （积性函数，欧拉函数）

    题意:求∑gcd(i,n),1<=i<=n思路:f(n)=∑gcd(i,n),1<=i<=n可以知道,其实f(n)=sum(p*φ(n/p)),其中p是n的因子.为什么呢?原因 ...

  3. dd大牛的《背包九讲》

    P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...

  4. Javascript 正则表达式笔记

    \d 元字符 + 量词 \w 常用的字符a-zA-Z0-9 .除回车之外的字符 ?0-1个字符 量词 只有前面是元字符,才变现量词 * 0-n 量词 /^\d+$/ 以字符开头,义字符结尾 [0-9] ...

  5. C# 与C/C++相互调用

    C++调用C#的DLLhttp://www.csharpwin.com/csharpspace/11385r8940.shtml C#调用C/C++动态库必须注意的几个问题http://www.rob ...

  6. JS之类型转换

    一.显示类型转换 1.Boolean() (1).undefined/null/‘’   ==> false (2).任何对象(包括例如var obj = {} ) ==>  true ( ...

  7. MyEclipse — Maven+Spring+Struts+Hibernate 整合 [学习笔记-3]

    引入Struts2 在pom.xml中加入jar包 <!-- struts2 --> <dependency> <groupId>org.apache.struts ...

  8. 程序空间(Program memory)

    The computer program memory is organized into the following: Data Segment (Data + BSS + Heap) Stack ...

  9. 通过表达式、函数给React组件属性赋值

    一.需求 当有传属性name的值时,则显示Hello "name",否则显示Hello World 二.4种方式的代码实现 1.通过三元运算符 <!DOCTYPE html& ...

  10. Java-J2SE学习笔记-查找一个String中，subString的出现次数

    1.查找一个String中,subString的出现次数 2.代码 package Test; public class TestStringContain { public static void ...