关于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获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  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. SG函数 模板

    int get_SG(int x) { ) return SG[x]; ]={}; ;i<=n;i++) ) v[get_SG(x-s[i])]=; int i; ;v[i];i++); SG[ ...

  2. 2.精通前端系列技术之seajs模块化使工作更简单（二）

    drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...

  3. RHEL 6.3安装(超级详细图解教程)[转载]

        附:RHEL6.3下载地址 32位:http://rhel.ieesee.net/uingei/rhel-server-6.3-i386-dvd.iso 64位:http://rhel.iee ...

  4. tornado介绍

    一.定义 tornado是一个异步非阻塞模型的服务器(tcp/http).web框架. 二.特性 1.高并发 原因:其一,网络事件循环部分根据操作系统选择最高效的,如Linux会是epoll: 其二, ...

  5. C++C++ 指针（二）--c++ 指针（二）--c++

    一.内存管理:new和delete 1.new操作符:从操作系统获得内存块,并返回该内存块的首地址. delete操作符:将new申请的内存返还给操作系统. 开始一个简单的例子: #include & ...

  6. OpenCV之响应鼠标（一）：利用鼠标获取坐标

    好久没有更新博客了,今天临时起意,将以前写的示例代码整理了一下,暂且发布一篇,希望对大家有用! 代码一:点击时显示坐标,鼠标移动时不显示. #include <cv.h> #include ...

  7. iOS 引导页组件 HcdGuideView

    HcdGuideView HcdGuideView让你为你的app添加一个漂亮的启动页变得简单. 要求 Xcode 6 or higher iOS 7.0 or higher ARC 安装方法 手动安 ...

  8. 生成1~n的全排列

    输入正整数n,输出n的全排列. 样例输入1: 3 样例输出1: 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 分析: 按字典序从小到大的顺序输出所有的排列. (字典序:两个序 ...

  9. 毕向东Java基础：day09_3-4

    day09-03 1.匿名内部类的使用场景. Body{  //身体 包括心脏 private  class XinZhang{  // 心脏 可以body的成员变量.如果不想被别人访问,加上priv ...

  10. (转)关于java和web项目中的相对路径问题

    原文:http://blog.csdn.net/yethyeth/article/details/1623283 关于java和web项目中的相对路径问题 分类: java 2007-05-23 22 ...