Comment déterminer si le bouton gauche de la souris est enfoncé en javascript

En JavaScript, il est courant de déterminer si le bouton gauche de la souris est enfoncé. Dans les applications Web qui utilisent la souris pour interagir, nous souhaitons généralement pouvoir surveiller en temps réel si le bouton gauche de la souris est enfoncé lorsque l'utilisateur déplace la souris, afin que les opérations ultérieures puissent être effectuées. Cet article présentera quelques techniques et méthodes pour réaliser le jugement d'une pression sur le bouton gauche de la souris.

1. Utilisez la propriété boutons de l'objet MouseEvent pour déterminer si le bouton gauche de la souris est enfoncé

Lorsque la souris bouge, le navigateur déclenchera l'événement MouseEvent. L'objet MouseEvent contient une propriété boutons, qui indique quels boutons de la souris sont actuellement enfoncés. Pour le bouton gauche de la souris, la valeur de l'attribut boutons est 1. Par conséquent, nous pouvons déterminer si le bouton gauche de la souris est enfoncé en déterminant si la propriété boutons de l'objet MouseEvent est égale à 1. Voici un exemple de code simple :

document.addEventListener('mousemove', function(event) {
  if (event.buttons === 1) {
    console.log('鼠标左键被按下了');
  }
});

2. Déterminez si le bouton gauche de la souris est enfoncé en jugeant les propriétés du bouton des événements mousedown et mouseup

Lorsque la souris est enfoncée ou relâchée, le navigateur déclenchera mousedown et mouseup événements respectivement. L'objet MouseEvent contient une propriété bouton, qui indique quel bouton de la souris a été enfoncé ou relâché. Pour le bouton gauche de la souris, la valeur de la propriété bouton est 0. Par conséquent, nous pouvons déterminer si le bouton gauche de la souris est enfoncé en déterminant si la propriété bouton des événements mousedown et mouseup est égale à 0. Voici un exemple de code :

document.addEventListener('mousedown', function(event) {
  if (event.button === 0) {
    console.log('鼠标左键被按下了');
  }
});

document.addEventListener('mouseup', function(event) {
  if (event.button === 0) {
    console.log('鼠标左键被释放了');
  }
});

Il convient de noter que dans l'exemple de code ci-dessus, nous écoutons respectivement les événements mousedown et mouseup. En effet, lorsque le bouton gauche de la souris est enfoncé, l'événement mousedown est déclenché ; lorsque le bouton gauche de la souris est relâché, l'événement mouseup est déclenché.

3. Enregistrez l'état du bouton gauche de la souris enfoncé en utilisant des variables globales ou des fermetures

Dans certains cas, nous devrons peut-être enregistrer l'état du bouton gauche de la souris enfoncé sur une période plus longue, et construire sur cela pour effectuer quelques opérations dessus . À ce stade, nous pouvons utiliser une variable globale ou une fermeture pour enregistrer l'état enfoncé du bouton gauche de la souris. Voici un exemple de code :

var isMouseDown = false;

document.addEventListener('mousedown', function(event) {
  if (event.button === 0) {
    isMouseDown = true;
  }
});

document.addEventListener('mouseup', function(event) {
  if (event.button === 0) {
    isMouseDown = false;
  }
});

document.addEventListener('mousemove', function(event) {
  if (isMouseDown) {
    console.log('鼠标左键被按下了');
    // 进行一些操作
  }
});

Dans l'exemple de code ci-dessus, nous enregistrons l'état enfoncé du bouton gauche de la souris via une variable globale isMouseDown. Lorsque le bouton gauche de la souris est enfoncé, nous définissons isMouseDown sur true ; lorsque le bouton gauche de la souris est relâché, nous définissons isMouseDown sur false. Dans la fonction d'écoute de l'événement de mouvement de la souris, certaines opérations sont effectuées uniquement lorsque isMouseDown est vrai.

Résumé

En JavaScript, il est courant de déterminer si le bouton gauche de la souris est enfoncé. Cet article présente trois techniques et méthodes permettant de déterminer si le bouton gauche de la souris est enfoncé. Plus précisément, nous pouvons réaliser cette fonction via la propriété boutons de l'objet MouseEvent, la propriété bouton des événements mousedown et mouseup, ou en utilisant une variable globale ou une fermeture pour enregistrer l'état enfoncé du bouton gauche de la souris. Dans le développement réel, nous pouvons choisir d'utiliser les techniques et méthodes correspondantes en fonction de besoins spécifiques.

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!