Maison > interface Web > Tutoriel H5 > Comment obtenir les coordonnées actuelles de la souris en temps réel

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

一个新手
Libérer: 2018-05-11 14:18:43
original
3997 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('on' + 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('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);
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal