event.offsetX、event.offsetY(相对事件发生的具体元素左上角的定位)

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

event.clientX、event.clientY(相对可视区域左上角的绝对定位)

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY(整个HTML文档中的绝对定位)

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

event.screenX、event.screenY(不常用)

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性(就是上面的地址栏,收藏夹都会算进去)

ev的offsetX,pageX,clientX和screenX的更多相关文章

  1. offsetX、clientX、screenX、pageX、layerX

    pageX/Y 原点相对于文档窗口左上角. offsetX/Y 原点相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (黑色为鼠标点击点 ...

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

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

  3. clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

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

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

  5. pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

  6. JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别

    首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...

  7. JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  8. pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...

  9. pageX,clientX,screenX,offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

随机推荐

  1. Oracle的安装与配置

    好久不来博客园了,有种熟悉而又陌生的感觉. 今天我装一下Oracle数据库,从头开始,因为昨天在虚拟机装了,不能用,卸掉了,系统也卸掉了,今天重新装,包括系统. 系统装好了,Oracle准备好了. 这 ...

  2. 软件工程导论课后习题Github作业(把一个英文句子中的单词次序逆序,单词中字母正常排列)

    Java源代码    package yly; import java.util.Scanner; public class ruanjian { public static void main(St ...

  3. 软件工程第二次程序的作业:Java计算器实验

    1.计算器实验报告 2.https://github.com/lollipopangel/test/tree/master 3.实验截图 7+8 清除 六.总结 通过本次实验让我对JFrame类.JP ...

  4. 过滤器Filter的使用(以登录为例子)

    使用过滤器步骤: (1)在web.xml文件中添加过滤器(以下例子是过滤多个请求) <!-- 用户登录过滤 --> <filter> <filter-name>lo ...

  5. realm vs. domain

    从wiki的角度:https://wikidiff.com/domain/realm domain是物理的,realm是抽象的,都是领域. domain是一个人或组织拥有或控制的地理区域,而realm ...

  6. MYSQL使用中字符编码一坑

    AJAX提交的字符出错,还以为是AJAX配置的错误呢!幸亏检查了一下MYSQL连接的字符集,发现开发库与本地库配置的字符集是也不一样的.

  7. Nginx+Php-fpm运行原理详解

    一.代理与反向代理 现实生活中的例子 1.正向代理:访问google.com 如上图,因为google被墙,我们需要vpnFQ才能访问google.com. vpn对于“我们”来说,是可以感知到的(我 ...

  8. Java微信二次开发(七)

    自定义菜单 第一步:新建包com.wtz.menu,新建类Button.java package com.wtz.menu; /** * @author wangtianze QQ:864620012 ...

  9. 华为5G在印度被禁

    前段时间,澳大利亚政府以“担心外国渗透”为由,决定禁止华为为建设新的5G网络提供设备.这让大家不禁猜测,难道华为的5G真的被国外市场禁入了? 对此,华为表达出了极大的失落感,并在一份声明中称,“政府告 ...

  10. Linux环境变量PATH

    查看PATH:echo $PATH以添加mongodb server为列修改方法一:export PATH=/usr/local/mongodb/bin:$PATH//配置完后可以通过echo $PA ...