原生js获取鼠标坐标方法全面讲解:
clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

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

二、分别讲解如下：

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变

兼容性：所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

兼容性：除IE6/7/8不支持外，其余浏览器均支持

offsetX/Y:

offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

layerX/Y:

layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y:

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变

兼容性：所有浏览器均支持

原生js获取鼠标坐标方法全面讲解-zmq的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

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

  2. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

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

  3. JS 获取鼠标坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  5. 现代浏览器原生js获取id号方法

    <div id="tests" class="a b c" style="color:#f00">123</div> ...

  6. 多兼容的JS获取鼠标坐标

    //第一.相对于屏幕 function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':sc ...

  7. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  8. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  9. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

随机推荐

  1. jQuery语法介绍

    来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...

  2. 利用pip安装模块（以安装pyperclip为例）

    >任务:利用pip安装pyperclip模块 >前提:你已经在你的电脑里面安装啦Python2.7的Windows版本,并且已经配置了环境变量 >实现步骤 >>打开你的P ...

  3. 分享一组矢量图标–UX图标字体库

    以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219 科技日新月异的今天,市面上各种分辨率.各种显示精度的显示设备层出不穷, ...

  4. tftp 限制ip 限制ip段 或者多个ip段访问

    1 限制单个ip访问 tftp 配置tftp信息 vi /etc/xinetd.d/tftp 在 service tftp配置信息中添加  only_form =ip 重启 service xinet ...

  5. 解决Office互操作错误"检索COML类工厂中 CLSID为 {xxx}的组件时失败，原因是出现以下错误: 80070005"

    Excel为例(其他如Word也适用)文件数据导入时报出以下错误: 检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是 ...

  6. dmidecode常用参数

    dmidecode常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. dmidecode这个命令真是神器啊,他能快速的获取服务器的硬件信息,而且这个命令有很多的花式玩法,今 ...

  7. Infinite V1 Release Note

      游戏地址 PLAY 玩法说明 WASD 控制角色移动 更新内容 - 初步完成了角色移动(攻击状态) 开发心得 独立做游戏 其实最耽误时间的就是在自己的短板上, 对于我来说 就是3D建模和动作制作. ...

  8. 浅析JS中的模块规范（CommonJS，AMD，CMD）////////////////////////zzzzzz

    浅析JS中的模块规范(CommonJS,AMD,CMD)   如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已.     ...

  9. 2.2 C#的注释

    注释,是代码中的一些“说明文档”,注释注释本身不会参与程序代码的编译和运行,仅仅是为了方便程序员阅读. C#的注释分为:单行注释.多行注释.文档注释. 单行注释的符号是2条斜杠线(斜线的方向是左下到右 ...

  10. jquery jQuery-File-Upload 例子

    网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1   比要的js一个都不能少,他们之间是有依赖关系的 ...