Explication détaillée de la coexistence de l'événement onClick et de l'événement onDblClick

Cette fois je vais vous apporter une explication détaillée de la coexistence des événements onClick et onDblClick Quelles sont les précautions pour la coexistence des événements onClick et onDblClick Voici un cas pratique, jetons un oeil.

L'exemple de cet article décrit la solution JS pour la coexistence des événements onClick et onDblClick sur le même élément DOM. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Dans un projet récent, j'ai rencontré le besoin d'ajouter des événements onclick et ondblclick sur le même élément DOM si j'ajoutais le traitement de la manière normale. , il s'est avéré que seul onclick serait exécuté. Ondblclick ne sera pas exécuté pour le moment, nous devons légèrement traiter les fonctions de traitement des deux événements pour obtenir la coexistence des deux événements :

<script type="text/javascript">
 var clickTimer = null;
 function _click(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   clickTimer = window.setTimeout(function(){
      // your click process code here
      alert("你单击了我");
   }, 300);
 }
  function _dblclick(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   // your click process code here
   alert("你双击了我");
 }
</script>
<button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>

L'idée de traitement est la suivante : utilisez une minuterie pour retarder l'exécution de l'événement onclick, afin que l'événement click déclenché à mi-chemin soit annulé pendant le processus de double-clic.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la délégation d'événements JS dans les projets

Partir de zéro pour utiliser l'authentification de connexion à l'applet WeChat Quan

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!