一、事件的兼容：
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根线，便于观察.
<head> <meta charset='utf-8' /> <script> ;(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); </script> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var ocanvas = document.queryselector( "#canvas" ), ogc = ocanvas.getcontext( '2d' ), width = ocanvas.width, height = ocanvas.height, oinfo = document.queryselector( "#info" ), opos = g.getpos( ocanvas ); ocanvas.addeventlistener( "mousemove", function(){ ogc.clearrect( 0, 0, width, height ); ogc.beginpath(); ogc.moveto( opos.x, 0 ); ogc.lineto( opos.x, height ); ogc.moveto( 0, opos.y ); ogc.lineto( width, opos.y ); ogc.closepath(); ogc.strokestyle = '#09f'; ogc.stroke(); oinfo.innerhtml = '鼠标的当前坐标是:(' + opos.x + ',' + opos.y + ')'; }, false ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> <p id="info"></p> </body>
以上就是如何实时获取鼠标的当前坐标 的详细内容。