JS : click et double click
Petit code tout simple afin de gérer les événements click et double click sur un même élément.
Le problème vient du fait qu'avant l'émission d'un événement dblclick
(double click), 2 événements click
sont émis ; nous souhaiterions que notre écouteur de click ne se déclenche qu'un seule fois.
/**@module rnb/ui/events/ClickDblClick*/
/**
* Objet pour gérer l'écoute des événements click et dblclick sur une
* même élément
*/
export default class ClickDblClick {
/**
*
* @param {HTMLElement} element Elément sur lequel écouter les événements.
* @param {Function} [onClick] Callbak pour les événements 'click'.
* @param {Function} [onDblClick] Callback pour les événements 'dblclick'.
* @param {number} [timing=500] Interval entre 2 click pour un double click.
*/
constructor (element, onClick, onDblClick, timing) {
/**
* Elément à gérer
*
* @private
* @type {HTMLElement}
*/
this.element = element;
/**
* Callback des click.
*
* @private
* @type {Function}
*/
this.userClickListener = null;
/**
* Ecouteur de dblclick
*
* @private
* @type {Function}
*/
this.userDblclickListener = null;
/**
* Ecouteur de click
*
* @private
* @type {Function}
*/
this.clickListener = this.onClick.bind(this);
/**
* Temps de l'exécution d'un événement (timestamp)
*
* @private
* @type {number}
*/
this.lastClick = 0;
this.timing = timing || 500;
this.setClickListener(onClick || null);
this.setDblClickListener(onDblClick || null);
}
/**
* Ecouteur de click.
*
* @protected
* @param {Event} e
*/
onClick (e) {
var time = Date.now();
if (time - this.lastClick > this.timing) {
this.lastClick = time;
this.userClickListener(e);
}
}
/**
* Définir l'écouteur de clic. Passer null pour arrêter l'écoute.
*
* @param {Function} listener
*/
setClickListener (listener) {
if (this.userClickListener !== listener) {
if (listener) {
this.element.addEventListener('click', this.clickListener, false);
} else {
this.element.removeEventListener('click', this.clickListener, false);
}
this.userClickListener = listener;
}
}
/**
* Définir l'écouteur de double-clic. Passer null pour arrêter l'écoute.
*
* @param {Function} listener
*/
setDblClickListener (listener) {
if (this.userDblClickListener !== listener) {
this.userDblClickListener = listener;
if (listener) {
this.element.addEventListener('dblclick', this.userDblClickListener, false);
} else {
this.element.removeEventListener('dblclick', this.userDblClickListener, false);
}
}
}
/**
* Arrêter l'écoute des événements
*/
dispose () {
this.setClickListener(null);
this.setDblClickListener(null);
this.element = null;
}
}
La solution n'est évidemment pas parfaite puisqu'elle dépend de l'intervalle de temps entre 2 clics définissant le double-clic propre à la plateforme sur laquelle tourne le navigateur web.
- Titre
- dblclick
- Titre
- Double Clic