Detect extended click, javascript

Question

Assuming these types of click:

• 1 CLICK
• 2 CLICKS IN A ROW
• EXTENDED CLICK

i know how to detect normal click and dbclick but how to detect extended click? that click you click and secure for X time for example?

Answer 1

Here is a suggestion:

You need a function that runs when there’s a long click. Since this does not exist native you have to create another function that is passed to the event receiver to measure the time. Measure time and stop if there is one mouseup.

I created a function longclick who does just that. Creates some variables that store the state of things in memory and returns a function that, yes, is used by the event receiver.

So when there is a mousedown, the variable mousedown will serve as flag/flag as it turns true. Then fire a counter and if there’s one mouseup flag changes and cancels counter.

I did now at the time, maybe it is possible optimizations, but in general the idea is there.

Edit: I have now added more logic to my function because in case the mousedown and mouseup happen in different elements the click should not be valid. I also added logic for maximum and minimum.

var longclick = function (cb) {
    var min = 2000;
    var max = 4000;
    var time, self, timeout, event;

    function reset() {
        clearTimeout(timeout);
        timeout = null;
    }

    window.addEventListener('mouseup', reset); // caso o mouseup ocorra fora do elemento
    return function (e) {
        if (!self) {
            self = this;
            self.addEventListener('mouseup', function (e) {
                e.stopPropagation(); // para não subir no DOM
                var interval = new Date().getTime() - time;
                if (timeout && interval > min) cb.call(self, event);
                reset();
            });
        }
        event = e;
        time = new Date().getTime();

        if (e.type == 'mousedown') timeout = setTimeout(reset, max);
    };
};

var div = document.querySelector('div');
var handler = longclick(function (e) {
    alert('clicado entre 2 e 4 segundos! ' + e.type);
    this.style.backgroundColor = '#ccf';
});
div.addEventListener('mousedown', handler);

jsFiddle: http://jsfiddle.net/n2382xsk/4/

Answer 2

According to the answer to this question in English "Listen to mouse hold Event on website?", you need to pass a parameter to the events mousedown and mouseup so that you can identify if the event type is mousedown, indicating as soon as the user is holding down the left mouse button.

The example below, also taken from the answer to the question "Listen to mouse hold Event on website?", will run an event when the user keeps an extended click on any div:

<div data-tempoMinimo="2000" data-tempo-maximo="4000" data-tempo-decorrido="0"></div>

$('div').on('mousedown mouseup', function mouseState(e) {
    var div = $('div');

    if (div.data('tempo-decorrido') == 0) {
        var horaAtual = new Date();

        // Devido ao JavaScript ser muito rápido, julguei necessário
        // diminuir um milisegundo da hora atual para evitar que o código
        // após esse if sempre retorne zero em newDate() - div.data('momento-ultimo-click').
        horaAtual.setMilliseconds(horaAtual.getMilliseconds() - 1);

        div.data('momento-ultimo-click', horaAtual);   
    }

    // Obtém o tempo decorrido em milisegundos.
    var tempoDecorrido = new Date() - div.data('momento-ultimo-click');

    // Verifica se já se passou o tempo mínimo
    if (tempoDecorrido > div.data('tempo-minimo') && e.type == "mousedown") {
        // Código executado ao manter o clique prolongado.
        console.log("Evento clique prolongado executado.");            
    }

    // Reseta o momento do último clique para que o tempo mínimo seja considerado novamente antes de atirar o evento.
    if (tempoDecorrido > div.data('tempo-maximo')) {
        div.data('momento-ultimo-click', new Date());
    }
});

The author of the original reply also made available a example on the Jsfiddle website, in which you can simulate an extended click on the div.