Comment déterminer la position de la souris lorsque javascript clique pour rechercher

JavaScript est un langage de programmation largement utilisé dans le développement de sites Web. Il peut aider les développeurs à ajouter des fonctions interactives dynamiques aux sites Web. Dans le développement actuel, le champ de recherche et le bouton de recherche sont des éléments essentiels du site Web. Lorsque l'utilisateur saisit un terme de recherche dans la zone de saisie et clique sur le bouton de recherche, comment l'utilisateur doit-il déterminer la position de la souris ? Certaines connaissances et compétences pertinentes seront présentées ci-dessous.

1. Introduction aux événements de souris

En JavaScript, vous pouvez utiliser les événements de souris pour obtenir la position et le type d'événement de la souris dans le navigateur, y compris les événements suivants :

1. clic : Indique les événements déclenchés lorsque la souris est cliquée. , y compris le clic gauche, le clic droit, le clic central, etc.
2. mousedown : indique les événements déclenchés lorsque le bouton de la souris est enfoncé, notamment la pression sur le bouton gauche, la pression sur le bouton droit, la pression sur le bouton central, etc.
3. mouseup : indique les événements déclenchés lorsque le bouton de la souris est relâché, notamment le relâchement du bouton gauche, le relâchement du bouton droit, le relâchement du bouton central, etc.
4. mousemove : Représente un événement déclenché lorsque la souris bouge. Il est généralement utilisé pour obtenir la position de la souris dans la fenêtre du navigateur en temps réel.

2. Obtenez la position de la souris

Une fois que l'utilisateur a saisi le terme de recherche dans la zone de recherche, si la souris clique sur le bouton de recherche, la position du clic de souris doit être obtenue. Dans les événements de souris, la position de la souris dans le navigateur peut être obtenue via l'objet événement. L'exemple de code est le suivant :

document.getElementById('btnSearch').addEventListener('click', function (event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;
  console.log('鼠标点击坐标：X=' + mouseX + ', Y=' + mouseY);
});

Le code ci-dessus indique que lorsque l'on clique sur le bouton de recherche, l'événement de clic est enregistré via addEventListener. Lorsque l'événement est déclenché, obtenez les propriétés clientX et clientY dans l'objet événement, c'est-à-dire la position de la souris dans la fenêtre du navigateur, puis affichez-les sur la console.

3. Déterminez la position de la souris

Dans le développement réel, si vous souhaitez effectuer une recherche uniquement lorsque la souris est cliqué sur le bouton de recherche, vous devez déterminer si la position de la souris se trouve dans la zone du bouton. Pour ce faire, vous devez obtenir les coordonnées du coin supérieur gauche et du coin inférieur droit de la zone où se trouve le bouton, puis déterminer si la position de la souris se situe dans cette plage.

Ce qui suit est un exemple de code.Dans le code, les informations de coordonnées de la zone où se trouve le bouton sont d'abord obtenues via la méthode getBoundingClientRect(), puis les informations de coordonnées lorsque vous cliquez sur la souris sont comparées aux informations de coordonnées. de la zone du bouton pour déterminer si la souris se trouve dans la plage du bouton :

document.getElementById('btnSearch').addEventListener('mousedown', function (event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;  
  var button = document.getElementById('btnSearch');
  var rect = button.getBoundingClientRect();
  var x1 = rect.left;
  var y1 = rect.top;
  var x2 = rect.right;
  var y2 = rect.bottom;
  
  if (mouseX >= x1 && mouseX <= x2 && mouseY >= y1 && mouseY <= y2) {
    console.log('搜索开始');
    // 执行搜索操作
  } else {
    console.log('鼠标不在按钮范围内');
  }
});

Dans le code ci-dessus, l'objet DOM du bouton est d'abord obtenu, puis les informations de coordonnées de la zone où se trouve le bouton sont obtenues via le getBoundingClientRect(), incluant les coordonnées du coin supérieur gauche et du coin inférieur droit. Sur la base de ces informations de coordonnées, les informations de position de la plage de boutons peuvent être calculées, puis il est déterminé si la position de la souris se trouve dans la plage de boutons.

IV. Conclusion

Grâce à l'introduction ci-dessus, nous pouvons voir qu'en JavaScript, les informations sur la position de la souris peuvent être facilement obtenues via des événements de souris, notamment la position de la souris dans le navigateur, la position du clic de la souris, etc. Dans le même temps, nous pouvons également obtenir les informations de coordonnées de l'élément pour déterminer si la position de la souris est dans la plage de l'élément afin d'obtenir un effet d'interaction plus précis.

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!