Comment obtenir les coordonnées actuelles de la souris en temps réel-Tutoriel H5-php.cn

Comment obtenir les coordonnées actuelles de la souris en temps réel

一个新手

Libérer： 2018-05-11 14:18:43

original

3988 Les gens l'ont consulté

Cet article concerne une fonction simple d'obtention des coordonnées de la souris en temps réel. Dans le développement d'animations sur toile, l'obtention des coordonnées de la souris, des touches du clavier, etc. est une opération courante. Nous les encapsulerons lentement dans une bibliothèque publique.

1. Compatibilité des événements :

function bindEvent(obj, event, fn) {
        if (obj.attachEvent) { //ie
            obj.attachEvent(&#39;on&#39; + event, function () {
                fn.call(obj);
            });
        } else {
            //chrome&ff
            obj.addEventListener(event, fn, false);
        }
    }

Copier après la connexion

Ce qui précède est compatible avec ie8 et corrige le pointage de ce mot-clé dans les versions inférieures de ie. chrome et ff. Pour d'autres packages plus couramment utilisés, veuillez vous référer à mon framework open source javascript gdom

2. Construire une bibliothèque de base en utilisant des expressions immédiates

Ajouter une méthode pour obtenir les coordonnées de la souris

;(function (window) {
    window.G = {};
    function bindEvent(obj, event, fn) {
        if (obj.attachEvent) { //ie
            obj.attachEvent(&#39;on&#39; + 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);

Copier après la connexion

3. Présentez la bibliothèque js encapsulée, liez le canevas comme objet d'écoute et imprimez les coordonnées de la souris actuelle

Les coordonnées de la souris, J'ai dessiné ici 2 lignes, faciles à observer.



<script>
;(function (window) {
    window.G = {};
    function bindEvent(obj, event, fn) {
        if (obj.attachEvent) { //ie
            obj.attachEvent(&amp;#39;on&amp;#39; + event, function () {
                fn.call(obj);
            });
        } else {
            //chrome&amp;ff
            obj.addEventListener(event, fn, false);
        }
    }

    G.getPos = function( dom ){
        var oPos = { x : 0, y : 0 };
        bindEvent( dom, &#39;mousemove&#39;, 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>

<script>
window.onload = function(){
    var oCanvas = document.querySelector( "#canvas" ),
        oGc = oCanvas.getContext( &#39;2d&#39; ),
        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 = &#39;#09f&#39;;
            oGc.stroke();

            oInfo.innerHTML = &#39;鼠标的当前坐标是:(&#39; + oPos.x + &#39;,&#39; + oPos.y + &#39;)&#39;;
        }, false );
}
</script>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!