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.

define(function () {
    'use strict';
    /**
     *  Objet pour gérer l'écoute des événements click et dblclick sur une
     *  même élément
     *
     *  @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 {int} [timing=500] Interval entre 2 click pour un double click.
     */
    var ClickDblClick = function (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 int
         */
        this.lastClick = 0;
        
        this.timing = timing || 500;
       
        this.setClickListener(onClick || null);
        this.setDblClickListener(onDblClick || null);
    };

    ClickDblClick.prototype = {
       
        constructor: ClickDblClick,
       
        /**
         * Ecouteur de click.
         * @protected
         * @param {Event} e
         */
        onClick: function (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: function (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: function (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: function () {
            this.setClickListener(null);
            this.setDblClickListener(null);
            this.element = null;
        }
    };
    
    // export
    return ClickDblClick;
});
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.

dblclick. Mozilla Developer Network,

Double Clic. Wikipédia