Comment gérer le conflit entre les événements de double-clic et de clic dans JS

Cette fois, je vais vous montrer comment gérer le conflit entre les événements de double-clic et de clic dans JS. Quelles sont les précautions pour gérer le conflit entre les événements de double-clic et de clic dans JS. Ce qui suit est un cas pratique, jetons un coup d'oeil ensemble.

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 délai minuterie 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 :

Comment écrire un composant personnalisé avec vue

Comment utiliser correctement l'actualisation à chaud et le webpack Hot chargement

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!