javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。

我们通过监听document的mousemove，就可以实时获得鼠标位置。

但是！！event中和鼠标相关的属性太多了，很让人头大！如下：

event.layerXevent.layerYevent.clientXevent.clientYevent.pageXevent.pageYevent.offsetXevent.offsetYevent.screenXevent.screenYevent.xevent.y

共计6组！

而且他们的区别并不明显，各浏览器间还不兼容！

这篇文章的目的就是搞清楚他们的区别，以及选出那些不推荐使用的。

测试代码

直接运行下列代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta charset="utf-8" /></p>
<style>
body {position:relative;}
    div {min-height: 300px; background-color: #eee;}
    #jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id="jg">显示结果</span><br />
<input type="button" value="一个按钮" /></p>
<div>屏内div</div>
<div style="height:1000px; width:2000px; background:#ddd;">很高很宽。。。</div>
<div>屏外DIV</div>
<p></body><br />
<script>
var jg = document.getElementById('jg');
document.onmousemove = function  (e) {
    e = e || window.event;
    jg.innerHTML = 'layerX:'+e.layerX+
                    ',layerY:'+e.layerY+
                    ', <br/>clientX:'+e.clientX+
                    ',clientY:'+e.clientY+
                    ', <br/>pageX:'+e.pageX+
                    ',pageY :'+e.pageY+
                    ',<br/>offsetX:'+e.offsetX+
                    ',offsetY:'+e.offsetY+
                    ',<br/>screenX:'+e.screenX+
                    ',screenY:'+e.screenY+
                    ',<br/>x:'+e.x+
                    ',y:'+e.y;
}
</script><br />
</html>

测试过程中发现一个神器：chrome(谷歌浏览器)和IE9全兼容以上所有属性！用来比较他们就非常方便了。

经过对比，结果如下：

各属性释义

clientX与Y，是鼠标相对于浏览器视口（即滚动条之外的部分忽略掉）的坐标；所有浏览器都支持。

screenX与Y，是鼠标相对于整个屏幕左边（顶边）的坐标，基本与document脱节了；全兼容。

offsetX与Y，是鼠标相对于当前所指向对象的坐标，鼠标此时指向按钮，则offsetX是相对于这个按钮；firefox不支持

x与y，同标准浏览器的layerX与Y，是IE中可以用来代替layerX的属性

pageX与Y，是鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的；IE7，8不支持。

重点：layerX与layerY

layerX与Y是标准浏览器出的新属性，IE9也支持。他可以用来代替offsetX与Y.但是，他的定义为：相对于当前指向元素最近的有定位信息的元素的坐标。这个“有定位”是指有非默认定位的css属性（即非static）。

如果，当前指向的元素就有定位，那么layerX与Y就返回相对于此元素的坐标；否则，就查看此元素的父标签；还是没有定位的话，就继续；一直到根元素——html节点。

所以，在firefox中，想要offsetX值，就必须加入position定位信息！

兼容性总结：

1，firefox不支持offsetX,offsetY与x,y属性，但完全可以用layerX代替他们；

2，ie中的x,y相当于firefox&chrome中的layerX与layerY；

3，ie7,8的document的边界与浏览器窗口的边界有2px的距离，所以在窗口最大化时screenX最小都有2px；

4，ie9中的layerX与Y，虽然有值，但却莫名其妙的不正确，貌似与html标签有关，比如我的例子的代码，把滚动条拖到最右边，鼠标从空白慢慢移动到大DIV上，此时大DIV的最右边与第一个DIV的最右边的差值也会算进layerX中。。。后头元素越来越多，这个计算就越复杂；而firefox与chrome的layerX则没有这个问题。所以，不要在IE9中使用layerX.

5,在chrome中，x与y虽然有值，但是是和clientX与Y完全相同！ 所以，不建议使用x,y属性。

兼容性补救

标准浏览器中可以用position与event.layerX配合来实现event.offsetX属性；

IE7，8中没有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX来求出。

所以，IE中的x,y或者offsetX,offsetY可以去掉一个了。

本文链接: javascript:与获取鼠标位置有关的属性.转载请保留.

javascript:与获取鼠标位置有关的属性的更多相关文章

  1. javaScript中获取鼠标位置的理解

    获取鼠标坐标值的总结为了避免混淆知识点 通过<javaScript高级程序设计>查到这些 event.clientX event.clientY event.pageX event.pag ...

  2. JavaScript获取鼠标位置的三种方法

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

  3. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  5. js如何获取鼠标位置

    获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...

  6. C++获取鼠标位置及全局检测鼠标行为

    1.获取鼠标位置(在屏幕的位置)  CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...

  7. jquery 获取鼠标位置

    //获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...

  8. C# 图像处理:获取鼠标位置信息(全局)

    Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...

  9. 兼容IE FF 获取鼠标位置

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

随机推荐

  1. 1049 - One Way Roads 观察 dfs

    http://lightoj.com/volume_showproblem.php?problem=1049 题意是,在一副有向图中,要使得它变成一个首尾相连的图,需要的最小代价. 就是本来是1--& ...

  2. 使用ant build build.xml报“includeantruntime was not set”警告及"Class not found: javac1.8"问题

    问题1:ant编译build.xml报“includeantruntime was not set”警告. 警告详情: warning: 'includeantruntime' was not set ...

  3. 【学习笔记】Sass入门指南

    本文将介绍Sass的一些基本概念,比如说“变量”.“混合参数”.“嵌套”和“选择器继承”等.著作权归作者所有. 什么是Sass? Sass是一门非常优秀的CSS预处语言,他是由Hampton Catl ...

  4. php中include_path配置

    在php.ini中可配置include_path来达到在任何文件中都可以直接引入该目录下文件 include_path = ".:/usr/share/php:/var/www/phpxwl ...

  5. Qt窗口-仅显示关闭按钮

    环境: Qt5.3.1, mac os x 10.10.1 setWindowFlags(Qt::Window | Qt::WindowTitleHint | Qt::CustomizeWindowH ...

  6. Javaweb学习笔记3—Serverlet

    今天来讲javaweb的第三个阶段学习. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思维是用的xMind画的,如果你对我的思维导图感兴趣并且想看到你们跟详细的备注信息,请点击下载 ...

  7. 详解nginx.conf文件配置项(包括负载均衡)

    http://www.cnblogs.com/hsapphire/archive/2010/04/08/1707109.html #运行用户 user  nobody nobody; #启动进程 wo ...

  8. 错误消息 This computer doesn't have VT-X/AMD-v enabled

    在VirtualBox的Ubuntu虚拟机里试图本地安装Kyma(一个基于Kubernetes的开源框架)时,遇到下面的错误信息: E0827 11:19:38.972489 3093 start.g ...

  9. SQLite运算符

    SQLite运算符 SQLite的运算符是什么? 运算符是一个保留字或一个字符主要用于SQLite语句的WHERE子句来执行操作,如比较和算术运算. 操作符用于指定条件的SQLite语句和作为连词在一 ...

  10. 嵌入式C语言-学习书籍推荐（pdf附上百度云链接）

    先推荐学习视频网站: https://www.bilibili.com/video/av22631677?from=search&seid=800092160484173881 书籍只推荐2本 ...