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. Codeforces Round #395 (Div. 2) B

    Description Young Timofey has a birthday today! He got kit of n cubes as a birthday present from his ...

  2. [已读]JavaScript面向对象编程指南

    又是一个忽悠人的书名,其实这本书的花了大量内容阐述JS的基础语法,BOM,DOM,事件,ajax(这个和很多js书一样).最后一章则是编程模式与设计模式. 我觉得与面向对象没多大关系,要算的话,pro ...

  3. .net core跨域设置

    services.AddCors(options => options.AddPolicy("AllowSameDomain", builder => builder. ...

  4. net MVC 四种基本 Filter

    四种基本 Filter 概述 MVC框架支持的Filter可以归为四类,每一类都可以对处理请求的不同时间点引入额外的逻辑处理.这四类Filter如下表:   使用内置的Authorization Fi ...

  5. 如何从GAC中拷贝文件出来 C:\Windows\assembly

    方法一:命令行拷贝. 开始--运行--cmd--"cd C:\WINDOWS\assembly".一般自己开发的dll都在GAC_MSIL这个文件夹下面,按照我如下的截图就可以拷贝 ...

  6. Spring-bean(零)

    内容提要:红为1,黄2,绿3 -----配置形式:基于xml文件的方式:基于注解的方式 -----Bean的配置方式:通过全类名(反射),通过工厂方法(静态工厂方法&实例工厂方法),Facto ...

  7. P2142 高精度减法

    题目描述 高精度减法 输入输出格式 输入格式: 两个整数a,b(第二个可能比第一个大) 输出格式: 结果(是负数要输出负号) 输入输出样例 输入样例#1: 2 1 输出样例#1: 1 说明 20%数据 ...

  8. Synplify FPGA 逻辑综合

    作为 Synopsys FPGA 设计解决方案的一部分,Synplify FPGA 综合软件是实现高性能.高性价比的 FPGA 设计的行业标准. 其独特的行为提取综合技术 (Behavior Extr ...

  9. dropuser - 删除一个 PostgreSQL 用户帐户

    SYNOPSIS dropuser [ option...] [ username] DESCRIPTION 描述 dropuser 删除一个现有 PostgreSQL 用户 和 该用户所有的数据库. ...

  10. delphi中使用自定义资源的方法

    如果要在delphi中使用自定义资源文件*.res文件,比如一个光标,此时可以采用下列步骤: 1,创建包含相应的资源文件,这里是创建一个包含自定义光标的res文件. 2,在主窗体的pas文件中加入编译 ...