Javascript Girl
  1. Javascript Girl
  3. Utilisation de addEventListener pour ajouter un rappel avec des arguments
Intereting Posts
React-native: détecte dev ou production env Comment feriez-vous les téléchargements de fichiers dans une application React-Relay? Laravel actualise les données après ajax ImagesLoaded with Masonry, Object # <Object> n'a pas de méthode 'imagesLoaded' Comment arrêter le bouton de liaison pour actualiser la page Comment la fonction load () permet-elle à l'utilisateur de fournir un rappel? Promesse. Tous les accès ne sont pas acceptés. Comment obtenir la position de la souris sur le canevas HTML5 transformé Comment écrire la fonction JavaScript pour vérifier la version JRE Créer une simple fenêtre pop-up modale dans XSLT Est-il possible de dispatchEvent () un clic de souris sur un élément <input type = text>? Comment obtenir l'index actuel dans la carte prototype Array? AngularJS / routage ionique à l'aide de $ stateProvider – le contrôleur ne recharge pas la deuxième fois qu'un état est appelé Comment puis-je répliquer un div un certain nombre de fois en fonction d'une valeur de boîte de sélection? ReactJS JSX toString ()

Utilisation de addEventListener pour ajouter un rappel avec des arguments

Je crée un système de glisser-déposer à l'aide d'un canevas. 

canvas.addEventListener('mousedown', function () { window.initialClickX = mouse.x; window.initialClickY = mouse.y; window.initialBallX = ball.x; window.initialBallY = ball.y; canvas.addEventListener('mousemove', onMouseMove, false); }, false); function onMouseMove(){ ball.x = mouse.x + window.initialBallX - window.initialClickX; ball.y = mouse.y + window.initialBallY - window.initialClickY; draw(); }

Quand je clique, j'ai besoin de mémoriser les valeurs de la position initiale de la souris et de la position initiale de la balle, afin que je puisse trainer correctement la balle.

Le code ci-dessus fonctionne parfaitement, mais je pense qu'il semble dérangeant avec toutes les variables globales. J'aimerais que onMouseMove puisse accepter les paramètres initialClickX, initialClickY, initialBallX et initialBallY. Mais comment puis-je ajouter ces paramètres à la fonction de rappel?

Ou s'il y a une meilleure façon de le faire, faites-le moi savoir, merci.

Essayez d'utiliser une fonction wrapper pour le faire. 

 canvas.addEventListener('mousedown', function () { var initialClickX = mouse.x; var initialClickY = mouse.y; var initialBallX = ball.x; var initialBallY = ball.y; canvas.addEventListener('mousemove', function() { onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY) }, false); }, false); function onMouseMove(initialClickX, initialClickY, mouseX, mouseY, initialBallX, initialBallY){ ball.x = mouseX + initialBallX - initialClickX; ball.y = mouseY + initialBallY - initialClickY; draw(); }

Voici un petit exemple de la façon dont vous pourriez le faire sans utiliser de variables globales: 

 function called() { console.log(arguments); } function caller(funx) { funx(); } caller(called.bind(this, 'a', 'b'));

Fondamentalement, vous définissez sur un ensemble de paramètres prédéfinis, dans ce cas 'a' et 'b' .

Dans votre cas, c'est quelque chose comme: 

 canvas.addEventListener('mousedown', function () { canvas.addEventListener('mousemove', onMouseMovebind(this, mouse.x, mouse.y, ball.x, ball.y), false); }, false);

Utilisez un talon de fonction d'emballage qui définit les paramètres: 

 canvas.addEventListener('mousemove', function() {onMouseMove(window.initialBallX, window.initialBallY, window.initialClickX, window.initialClickY); });