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. SPFA/Dijkstra POJ 3013 Big Christmas Tree

    题目传送门 题意:找一棵树使得造价最少,造价为每个点的子节点造价和*边的造价和 分析:最短路跑出1根节点到每个点的最短边权值,然后每个点的权值*最短边距和就是答案,注意INF开足够大,n<=1特 ...

  2. windows下配置java环境jdk

    Windows系统下搭建java的开发环境和配置环境变量 具体步骤打开链接地址:https://www.cnblogs.com/lijuntao/p/6694483.html

  3. XHTML 1.0 的三种 XML 文档类型 DOCTYPE

    XHTML 1.0 的三种 XML 文档类型 XHTML 1.0 规定了三种 XML 文档类型 XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W ...

  4. fscanf

    fscanf (PHP 4 >= 4.0.1, PHP 5, PHP 7) fscanf — 从文件中格式化输入 说明 mixed fscanf ( resource $handle , str ...

  5. Java-每日编程练习题③

    一.计算圆周率 中国古代数学家研究出了计算圆周率最简单的办法: PI=4/1-4/3+4/5-4/7+4/9-4/11+4/13-4/15+4/17...... 这个算式的结果会无限接近于圆周率的值, ...

  6. canvas基础绘制-倒计时(下)

    digit_1.js: digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0 ...

  7. JSP自定义标签开发步骤

    自定义的标签库一.基本概念: 1.标签(Tag): 标签,通常也成为动作,是一组按照XML语法格式编写的代码片段,在JSP中,用来封装在页面中可重复利用的逻辑,通过标签可以使JSP网页变得简洁并且易于 ...

  8. 在git远程仓创建项目之后，提交本地项目的使用方法

    命令介绍 git 用户配置 git config --global user.name "张三" git config --global user.email "zhag ...

  9. python中的get函数

    >>> a={1:'a',2:'b'}>>> print a.get(1)a>>> print a.get(3)None

  10. mysql 中modify和change区别(以及使用modify修改字段名称报错)

    使用modify修改字段报错如下: mysql> alter table student modify name sname char(16);ERROR 1064 (42000): You h ...