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;
    }
}
ClickDblClick : gestionnaire de click et de double-clic.

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