用JavaScript 获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox)和用jquery方法的简单分析
来源:互联网 发布:360网络测速器 5.1.0 编辑:程序博客网 时间:2024/06/09 17:45
前两天帮助同事一起弄了一下效果图项目,遇到了在后台里需要在效果图上获取鼠标的坐标。因为我们的js都是刚开始学习的,所以我们就只能上网找了一些方法,一开始我们是用jq的方法,结果发现存在了兼容问题。
列如:
<body> <img id="addInput" src="images/1.jpg" style="width: 500px; height: 400px;" value=" "/><script>$(function() { $("#addInput").on("click",function() { var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0; var positionY=e.originalEvent.y + document.body.scrollTop - $(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;$(this).attr("value",{positionX,positionY}); });});</script></body>
所以我又不得不放弃用这种方法,结果就在网上找到了一篇非常不错的代码,很好的解决了我的问题,所以我决定要把它记录下来。代码如下:
<!DOCTYPE html><html><head><title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera )</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css"> .tip {width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}</style>//方法1function mousePos(e){ var x,y; var e = e||window.event; return { x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft, y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop };};//方法2//Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了,//在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,//而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTopfunction getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; //alert('x: ' + x + '\ny: ' + y); return { 'x': x, 'y': y }; }function test(e){ document.getElementById("mjs").innerHTML = getMousePos(e).x+','+getMousePos(e).y; };</script></head><body><div id="mjs" class="tip">获取鼠标点击位置坐标</div><div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div></body></html>
不过我在实际运用当中是有改动的。
列如:
$(function() { function getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; return { 'x': x, 'y': y }; } $("#addInput").on("click",function(e) { var positionX=parseInt(getMousePos(e).x - $(this).offset().left); var positionY=parseInt(getMousePos(e).y - $(this).offset().top); $(this).attr("value",{positionX,positionY}); });});
还有一些代码的意思我还没有时间去深入了解,所以先记录下来。
获取在窗口客户区的坐标e.clientX e.clientY;
获取在窗口页面中的坐标 e.pageX e.pageY;
更多属性详情可以阅读:http://www.cnblogs.com/panjun-Donet/articles/1294033.html
1 0
- 用JavaScript 获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox)和用jquery方法的简单分析
- JavaScript 获取鼠标坐标的方法
- CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
- js获取鼠标移动时的坐标
- Jquery 获取鼠标的坐标
- 兼容各种浏览器获取鼠标的坐标
- JavaScript鼠标移动获取坐标
- JavaScript中几种获取鼠标点击坐标位置的方法
- 基于JavaScript实现 获取鼠标点击位置坐标的方法
- 获取事件目标对象的位置坐标或者鼠标位置坐标(兼容IE和火狐)
- jquery 获取鼠标和元素的坐标点
- javascript获取鼠标坐标pageX和clientX的区别
- javascript获取当前鼠标点击位置处的控件(兼容IE FireFox google浏览器 )
- javascript中获取当前鼠标的坐标
- javascript中获取当前鼠标的坐标
- 用鼠标获取界面的坐标
- Firefox浏览器兼容Javascript脚本的方法
- 用javascript获取鼠标坐标位置
- 分别用C++和JavaScript 实现四则运算表达式求值
- xcode 菜单翻译
- ListView或者RecycleView滚动时隐藏Toolbar( Part 2 )
- golang交叉编译
- 弹出输入法布局向上移动(使用OnLayoutChangeListener实现)
- 用JavaScript 获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox)和用jquery方法的简单分析
- 搭建ExtJS环境
- Xutils 3.0框架更新
- Java学习之多态
- electron框架学习之浅析IPC使用
- C++内存管理
- Windows环境安装Linux系统及jdk部署
- RecylerView 的用法
- 客户端和服务端在同一台机器上,wireshark如何实现抓包