扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关怎么实时获取鼠标的当前坐标 的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联从2013年创立,是专业互联网技术服务公司,拥有项目成都网站设计、成都网站建设、外贸网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元福绵做网站,已为上家服务,为福绵各地企业和个人服务,联系电话:18982081108
一、事件的兼容:
function bindEvent(obj, event, fn) { if (obj.attachEvent) { //ie obj.attachEvent('on' + event, function () { fn.call(obj); }); } else { //chrome&ff obj.addEventListener(event, fn, false); } }
上面兼容ie8以及修正this关键字在ie低版本的指向,下面兼容chrome和ff。其他更常用的封装可以参考我的javascript开源框架gdom
二、用立即表达式搭建一个基本的库
添加获取鼠标坐标的方法
;(function (window) { window.G = {}; function bindEvent(obj, event, fn) { if (obj.attachEvent) { //ie obj.attachEvent('on' + event, function () { fn.call(obj); }); } else { //chrome&ff obj.addEventListener(event, fn, false); } } G.getPos = function( dom ){ var oPos = { x : 0, y : 0 }; bindEvent( dom, 'mousemove', function( ev ){ var oEvent = ev || event, x, y; if ( oEvent.pageX || oEvent.pageY ){ x = oEvent.pageX; y = oEvent.pageY; }else { x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft; y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop; } x -= dom.offsetLeft; y -= dom.offsetTop; oPos.x = x; oPos.y = y; } ); return oPos; }; })(window);
三、引入封装的js库,绑定canvas为监听对象,打印当前鼠标的坐标
鼠标的坐标,我这里画了2根线,便于观察.
感谢各位的阅读!关于怎么实时获取鼠标的当前坐标 就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流