各浏览器的鼠标位置测试
来源:互联网 发布:linux查所有进程命令 编辑:程序博客网 时间:2024/05/29 18:45
参考文章:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html
重点内容http://www.cnblogs.com/kongxianghai/p/4192032.html
测试属性:
e.pageX(jQuery)
e.layerX
e.offsetX(HTML DOM Event)
e.clientX(HTML DOM Event)
e.x(HTML DOM Event IE属性)
测试浏览器:
chrome53/IE11/FF49
图示:
测试代码如下:
<!DOCTYPE html><!--@author JinYingYing--><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #view { position: relative; left: 25px; top: 25px; width: 400px; height: 100px; border: 100px solid #adff2f; background: #ff8c00; } #view_2 { position: absolute; left: 75px; top: 375px; width: 300px; height: 100px; background: #008b8b; } #text{ position: absolute; left: 700px; top: 100px; font-size: 20px; } </style> </head> <body> <div id="fake" style=" position: absolute; left: 10px; top:10px; width: 3000px; height: 2000px; background: #d3d3d3; padding: 50px;"> <div id="view"></div> <div id="view_2"></div> <div id="text"> <p>灰色区域left:10px,top:10px,padding:50px</p> <p>黄色区域width:400px height:100px top:25px,left:25px </p> <p>浅绿色是黄色区域的边框:宽100px</p> <p>深绿色width:300px height:100px left:75px top:375px</p> </div> </div> <script type="text/javascript"> document.onclick = function(e) { e = e || window.event; console.log('e.pageX:', e.pageX); console.log('e.layerX:', e.layerX); console.log('e.offsetX:', e.offsetX); console.log('e.clientX:', e.clientX); console.log('e.x:', e.x); } </script> </body></html>
测试结果如下:
chrome:
e.pageX——相对于文档左边缘的鼠标位置。
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——发生事件的地点在事件源元素的坐标系统中的 x 坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标
IE:
e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——发生事件的地点在事件源元素的坐标系统中的 x 坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始
FF:
e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——发生事件的地点在事件源元素的坐标系统中的 x 坐标
e.clientX——相对可视区域的坐标
e.x——undefined
总结:
1)、其中clientX是W3C标准的一个属性,所以都挺符合的;
2)、基本都已经可以支持offsetX,在Canvas绘图中使用这个属性非常方便;
3)、e.x是IE的属性,差距较大;
4)、layerX搜索时,没有找到W3C文档标准说明,对这个我比较模糊,最好还是 不用吧。
- 各浏览器的鼠标位置测试
- 各浏览器的鼠标位置测试
- 各浏览器的鼠标位置测试
- 各浏览器的鼠标位置测试
- 测试鼠标光标位置
- 获取鼠标的位置 (完美兼容各种浏览器)
- Javascript捕获鼠标位置(跨浏览器)
- 鼠标位置距浏览器窗口距离
- 鼠标位置距浏览器窗口距离
- 鼠标的位置
- 鼠标光标的位置,
- 获得鼠标的位置
- 鼠标的位置
- 鼠标的位置控制
- 获取鼠标的位置
- javascript获取当前鼠标点击位置处的控件(兼容IE FireFox google浏览器 )
- 点击 鼠标 图片跟着鼠标的位置
- js获取鼠标的位置
- ARCEngine:缓存切片(GP)
- IOS地图开发,MapKit框架对行走路径的显示
- 第八周项目3-顺序串算法
- ReaLogic开发框架-脚手架代码
- picamera 1.10 教程及api中文简译(三)picamera的基本使用
- 各浏览器的鼠标位置测试
- 在JavaScript中如何判断一个字符串中是否包含某个字符串
- YV12 and NV12
- Golang 1.4 net/rpc server源码解析
- struts+spring+hibernate简介
- TCP/IP参考模型
- 零基础HTML与CSS编码(二)
- Building Your First App笔记
- 我的学习