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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
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
世界收音机发展史
2021/03/01 无线电
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
浅谈PHP封装CURL
2019/03/06 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python下载图片实现方法(超简单)
2017/07/21 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
逻辑链路控制协议
2016/10/01 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
大学生村官入党自传
2015/06/26 职场文书
导游词之桂林山水
2019/09/20 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python