如何取得事件中鼠标坐标

因为现在常用主流浏览器对W3C准的不完全遵守，导致了书写js脚本经常要专注兼容问题，这也是现在js框架流行的一个原因。而鼠标位置相对于document对象的获取更是其中的代表，那真是诸侯割剧，群雄逐鹿，相当的混乱呀。
据俺查资料所知，能用的得到鼠标的属性有如下六大对：

1 clientX,clientY
2 layerX,layerY
3 offsetX,offsetY
4 pageX,pageY
5 screenX,screenY
6 x,y

如果说没得用令人头疼，那么有太多可用，那个又不好用就令人恼火了。但对于我等要靠coding来养家糊口的，没困难要上，有困难睁着通红的双眼也要上。
开始分析之前，必须明确要获取的鼠标坐标是相对于document的，因为，js编程都是操作dom对象，所以得到document才有意义。下面开始分析解决之道。

首先，最好的情况下，老版本的Netscape提供了pageX和pageY这一对属性，并且得到的x,y坐标刚好是相对于document而言。所以对于这类情况，代码如此：

1  if(!e) var e = window.Event;
2  var x = e.pageX;
3  var y = e.pageY;

现在考虑不太理想的情况，对于不提供pageX和pageY的浏览器。它们大多支持clientX/Y属性，但都是相对于window的坐标值。所以要取得适合自己用的坐标还需要处理：

1   if(!e) var e = window.Event;
2   var x = e.clientX + document.documentElement.scrollLeft;
3   var y = e.clientY + document.documentElement.scrollTop;

综合两种情况，可以写一个兼容大多数主流浏览器的方法得到鼠标坐标：

1  if(!e) var e = window.Event;
2   var x = e.pageX ||(e.clientX?e.clientX+document.documentElement.scrollLeft:0);
3   var y = e.pageY ||(e.clientY?e.clientY+document.documentElement.scrollTop:0);

转载于:https://www.cnblogs.com/phonefans/archive/2008/09/03/1282758.html

如何取得事件中鼠标坐标相关推荐

获取IE与FF中鼠标坐标
据资料显示,IE中获取鼠标坐标的事件属性有以下几个: clientX设置或获取鼠标指针位置相对于窗口客户区域的x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY设置或获取鼠标指针位 ...
获取鼠标在盒子中的坐标
1.在盒子内点击,想要得到鼠标距离盒子左右的距离想到鼠标事件,但是并不是对于盒子而言的 2.首先得到鼠标在页面中的坐标(pageX.pageY) 3.其次得到盒子在页面中的距离 4.距离一减,就能 ...
JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标
分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量第一步:求浏览器边框位置 x=e ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
Windows下C/C++模拟鼠标点击，PC端没有鼠标设备也能够获取鼠标坐标、移动鼠标坐标、模拟鼠标点击事件，方法一亲测有效
------- [ 转载请保留 ] ------- 作者:西_瓜_瓜博客:https://blog.csdn.net/xi_gua_gua/article/details/105773298 --- ...
html中的鼠标事件怎么写,html5中的鼠标事件以及鼠标事件属性
鼠标事件先列出html5中鼠标常见的一系列事件: 事件名称描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 ondrag 当拖动元素时运行脚本 ondrage ...
ArcEngine的鼠标事件中按键判断~
我们都知道,在.Net的鼠标事件中判断鼠标事件方法如下(以button为例): Private Sub Button1_MouseDown(ByVal sender As System.Object, ...
tkinter中鼠标与键盘事件
tkinter中鼠标与键盘事件(十五) 本文转自Tynam Yang的博客园 import tkinterwuya = tkinter.Tk() wuya.title("wuya" ...
java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...

如何取得事件中鼠标坐标

如何取得事件中鼠标坐标相关推荐

最新文章

热门文章