Résoudre le conflit entre les événements de double-clic et de clic

Cette fois, je vais vous présenter comment résoudre le conflit entre les événements de double-clic et de clic. Quelles sont les précautions pour résoudre le conflit entre les événements de double-clic et de clic ? .

Dans le même bloc fonctionnel du code JS, les événements de clic et de double-clic sont généralement utilisés en même temps, mais nous rencontrons généralement un problème, c'est-à-dire qu'un événement de double-clic est exécuté lors d'un double-clic , et il est également exécuté en cas de double-clic. De tels conflits sont souvent rencontrés dans ZTree et DHTMLX.

Pour résoudre le conflit entre les deux événements, vous devez retarder l'événement de clic. Si un événement de clic est détecté pendant ce délai, alors les deux clics sont considérés comme un événement de double-clic, alors uniquement Exécuter. l'événement de double-clic et effacez immédiatement le temporisateur pour empêcher le deuxième clic de prendre effet.

Le code spécifique est le suivant :

var clickFlag = null;//是否点击标识（定时器编号）
function doOnClick(...) {
  if(clickFlag) {//取消上次延时未执行的方法
    clickFlag = clearTimeout(clickFlag);
  }
  
  clickFlag = setTimeout(function() {
    // click 事件的处理
  }, 300);//延时300毫秒执行
}
function doOnDblClick(...) {
  if(clickFlag) {//取消上次延时未执行的方法
    clickFlag = clearTimeout(clickFlag);
  }
  
  // dblclick 事件的处理
}

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 PHP chinois !

Lecture recommandée :

Explication détaillée du cas d'utilisation du composant select

Encapsuler le hook de navigation de routage Vue2 et l'utiliser en combat réel

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!