如何实时获取鼠标的当前坐标

一、事件的兼容：

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>
    

以上就是如何实时获取鼠标的当前坐标 的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！