Séquencement des événements onclick et ondblclick

Lorsqu'une balise HTML exploite les événements onclick et ondblclick on constate lors d'un double-clic qu'un événement onclick est déclenché.

Ce comportement est le comportement natif du système d'exploitation Windows. De plus, l'ordonnancement des événements dépend du navigateur utilisé :

- Sous IE, on a les événements suivants : onclick puis ondblclick (un seul onclick déclenché avant le double-clic),
- Sous Firefox, on a les événements suivants : onclick, onclick puis ondblclick (deux onclick déclenchés avant le double-clic).

Sous Windows, l'intervalle de temps entre 2 clics permettant de savoir s'il y a double-clic est de 500 ms. Cette valeur est configurable par l'utilisateur (via le Panneau de configuration) et stockée dans la base de registres.

Comment empêcher le déclenchement du (des) onclick avant le ondblclick ?

Une première solution :

<script> 
<!--
// File d'attente des evts onclick
var fileEvtClic = new Array(); 
function execClic () 
{ 
// Extraire l'evt clic de la file d'attente et
// executer le code JS associé
var obj = fileEvtClic.shift(); 
window.eval(obj.tr.getAttribute('onfacticeclic')); 
}
function fctClic (objTr) 
{ 
var obj = {};
// Ajouter l'evt dans la file d'attente et deferrer son traitement de 300 ms
obj.tr = objTr; 
obj.idTimeOut = setTimeout("execClic()", 300); 
fileEvtClic.push(obj); 
}
function cancelClic(objTR) 
{ 
// Un evt double-clic est declenché :
// supprimer des evts de clic sur la meme ligne (meme balise TR)
// de la file d'attente
var i = 0, obj;
while (i < fileEvtClic.length) 
{ 
obj = fileEvtClic[i]; 
if (obj.tr == objTR) 
{ 
clearTimeout(obj.idTimeOut); 
fileEvtClic.splice(i, 1); 
} 
else 
i++; 
} 
} 
--> 
</script>

Sur une balise TR d'une TABLE LISTE par exemple :

Inconvénient de la solution : Elle suppose de connaître l'intervalle de temps entre 2 clics : Cette valeur est une valeur du système d'exploitation et peut varier en fonction de celui-ci (Windows, Mac OS, Linux, etc.). De plus, cette valeur est configurable par l'utilisateur.

Autre solution : Ne pas s' appuyer sur l'événement ondblclick et le simuler : Sur le onclick, déclencher un timer d'une valeur determinée (500 ms par exemple).
Pour Firefox : si un autre onclick est déclenché pendant ce laps de temps alors déclencher le pseudo double-clic.
Pour IE : si un onmousedown et onmouseup sont déclenchés pendant ce laps de temps alors déclencher le pseudo double-clic.

Avantage de la solution : Fonctionne sur tous les systèmes d'exploitation.
Inconvénient : Dépend du nombre de onclick déclenchés avant le double-clic (donc dépendant du navigateur).

Articles connexes