JavaScript中获取鼠标位置相关属性总结


Posted in Javascript onOctober 11, 2014

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

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

但是!!event中和鼠标相关的属性太多了,很让人头大!如下:

event.layerX event.layerY
event.clientX event.clientY
event.pageX event.pageY
event.offsetX event.offsetY
event.screenX event.screenY
event.x event.y

共计6组!

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

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

测试代码

直接运行下列代码:

<!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 prototype对象的属性说明
Mar 13 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
JS的数组迭代方法
Feb 05 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript中最简洁的编码html字符串的方法
Oct 11 #Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 #Javascript
探讨js字符串数组拼接的性能问题
Oct 11 #Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 #Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 #Javascript
js点击button按钮跳转到另一个新页面
Oct 10 #Javascript
jQuery获取iframe的document对象的方法
Oct 10 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Python深入06——python的内存管理详解
2016/12/07 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python函数装饰器实现方法详解
2018/12/22 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python 录制系统声音的示例
2020/12/21 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
四年级科学教学反思
2014/02/10 职场文书
施工工地安全标语
2014/06/07 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
建国大业电影观后感
2015/06/01 职场文书
七年级思品教学反思
2016/02/20 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python