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. Mirror Number SPOJ - MYQ10

    Mirror Number SPOJ - MYQ10 题意:http://blog.csdn.net/hcbbt/article/details/38349367 稍微改一下http://www.cn ...

  2. git导出代码

    1.快速查询 $git archive --format zip --output "./output.zip" master -0 ./output.zip 是生成的文件 mas ...

  3. h5-21-文件操作-读取文件内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 521 Longest Uncommon Subsequence I 最长特殊序列 Ⅰ

    给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列).子序列可以通过删去字符串中的某些字符实现,但不能改变剩余 ...

  5. 148 Sort List 链表上的归并排序和快速排序

    在使用O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 详见:https://leetcode.com/problems/sort-list/description/ Java实 ...

  6. 02.第二章_C++ Primer学习笔记_变量和基本类型

    2.1  基本内置类型 2.1.1  算术类型 算术类型包括两类:整型和浮点型 2.2  变量 2.3  复合类型 2.4  const限定符 2.5  处理类型 2.6  自定义数据结构

  7. NodeJS&&前端思考

    做大型软件(工程化): 1.测试相关 tdd / bdd 测试覆盖率 2.规范化 standard.各种 lint.hint 3.构建相关 gulp.grunt.webpack,大量插件 4.生成器 ...

  8. 洛谷P4013 数字梯形问题(费用流)

    题意 $N$行的矩阵,第一行有$M$个元素,第$i$行有$M + i - 1$个元素 问在三个规则下怎么取使得权值最大 Sol 我只会第一问qwq.. 因为有数量的限制,考虑拆点建图,把每个点拆为$a ...

  9. Bootstrap基本理论

    Bootstrap,来自 Twitter,是目前最受欢迎的前段框架.Bootstrap是基于HTML.CSS.JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷 Bootstrap特点:优雅, ...

  10. centos安装字体

    cd /usr/local/fonts/zh_CN/TrueType/ cp /root/simsunb.ttf /usr/share/fonts/zh_CN/TrueType/ mkfontscal ...