Detaillierte Erläuterung der Koexistenz von onClick-Ereignis und onDblClick-Ereignis

Dieses Mal werde ich Ihnen die Koexistenz von onClick-Ereignissen und onDblClick-Ereignissen ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Koexistenz von onClick-Ereignissen und onDblClick-Ereignissen?

Das Beispiel in diesem Artikel beschreibt die JS-Lösung für die Koexistenz von onClick-Ereignissen und onDblClick-Ereignissen auf demselben DOM-Element. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In einem kürzlich durchgeführten Projekt bin ich auf die Notwendigkeit gestoßen, zwei Ereignisse, onclick und ondblclick, zum selben DOM-Element hinzuzufügen Auf normale Weise wird zu diesem Zeitpunkt nur OnClick ausgeführt. Wir müssen die Verarbeitungsfunktionen der beiden Ereignisse geringfügig verarbeiten, um die Koexistenz der beiden Ereignisse zu erreichen :

<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>

Die Verarbeitungsidee lautet: Verwenden Sie den Timer, um die Ausführung des Onclick-Ereignisses zu verzögern, sodass das auf halbem Weg ausgelöste Click-Ereignis während des Doppelklickvorgangs abgebrochen wird.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die JS-Ereignisdelegierung in Projekten

Beginnen Sie bei Null, um die WeChat-Applet-Anmeldeauthentifizierung durchzuführen Quan

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Koexistenz von onClick-Ereignis und onDblClick-Ereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!