13

Supondo estes tipos de clique:

  • 1 CLIQUE
  • 2 CLIQUES SEGUIDOS
  • CLIQUE PROLONGADO

eu sei como detectar o click normal e o dbclick mas como detectar o clique prolongado? aquele clique que você clica e segura por X tempo por exemplo?

2
  • podes usar o mousedown mas deves ter um timeout para confirmar. Quantos milisegundos é "longo"?
    – Sergio
    Commented 11/07/2015 às 15:05
  • @Sergio seria legal ser ajustável, mas nesse caso seria algo como no mínimo 2 segundos máximo 4
    – Elaine
    Commented 11/07/2015 às 15:40

2 Respostas 2

14

Aqui fica uma sugestão:

Precisas de uma função que corra quando houver um clique longo. Como isso não existe nativo tens de criar uma outra função que seja passada ao oscultador de eventos para medir o tempo. Medir tempo e interromper caso houver um mouseup.

Criei uma função longclick que faz isso mesmo. Cria algumas variáveis que guardam em memória o estado das coisas e retorna uma função que, essas sim, é usada pelo oscultador de eventos.

Desse modo quando houver um mousedown, a variável mousedown vai servir de flag/bandeira pois vira true. Aí dispara um contador e se houver um mouseup a flag muda e anula o contador.

Fiz agora na hora, talvez seja possível otimizações, mas em geral a ideia está lá.

Edit: juntei agora mais lógica na minha função pois caso o mousedown e o mouseup acontecerem em elementos diferentes o clique não deve ser válido. Juntei também lógica para máximo e minimo.

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/

8
  • 1
    Muito boa a idéia, fez bem o que eu pensei que era criar uma função "padrão". Muito bom, Obrigada, qualquer dúvida retorno. Vou adaptar antes de marcar como correta..
    – Elaine
    Commented 11/07/2015 às 16:05
  • Sergio, não sei se é valido por nesta pergunta mas como é associado irei perguntar-te. Eu gostaria de dar a sensação visual ao usuário para que ele saiba que está clicando e segurando.. No seu exemplo mesmo teria como usando o efeito scale do CSS demonstrar isso?
    – Elaine
    Commented 11/07/2015 às 18:01
  • Levando em consideração o tempo que ele está a segurar a div, quanto mais tempo mais pequeno é o o número do scale (com um limite lógico) e quando ele liberar o clique a scale dá uma "pulsação" (um pequeno zoom, como o elastico dá quando repuxamos) e volta ao tamanho original, poderia me dar idéias de como faze-lo?
    – Elaine
    Commented 11/07/2015 às 18:03
  • @Elaine podias fazer assim na sua versão mais simple: jsfiddle.net/n2382xsk/5 Para ir crescendo podia-se juntar uma lógica com setInterval que vai aumentando o scale à medida que o tempo passa.
    – Sergio
    Commented 11/07/2015 às 18:09
  • Gostei da forma com que aplicastes, porém nao consigo colocar para acompanhar o tempo, acho que ficaria um efeito legal se a cada 0.1s ele abaixasse 0.1 no scale respeitando o mínimo de 0.4 no scale total, para a div também não sumir.. eu teria que por chamando essas funções dentro da setinterval? é isso?
    – Elaine
    Commented 11/07/2015 às 18:18
4

De acordo com a resposta a esta pergunta em inglês "Listen to mouse hold event on website?", você precisa passar um parâmetro para os eventos mousedown e mouseup para que você possa identificar se o tipo do evento é mousedown, indicando assim que o usuário está mantendo pressionado o botão esquerdo do mouse.

O exemplo abaixo, também extraído da resposta à pergunta "Listen to mouse hold event on website?", irá executar um evento quando o usuário manter um clique prolongado em qualquer 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());
    }
});

O autor da resposta original também disponibilizou um exemplo no site JSFiddle, no qual você pode simular evento de manter um clique prolongado na div.

4
  • Achei legal a pergunta mas ele acaba detectando cliques juntos, como expliquei ao @Sergio ele deve ter um tempo mínimo e máximo para ser considerado um clique prolongado
    – Elaine
    Commented 11/07/2015 às 15:38
  • 1
    @Elaine atualizei a resposta considerando o tempo mínimo e máximo. Assim será que fica mais ou menos próximo ao que você precisa? Commented 11/07/2015 às 16:10
  • 2
    Gostei da forma com que trabalhou com os parametros, é sim o que eu desejo, +1
    – Elaine
    Commented 11/07/2015 às 16:15
  • 1
    @Sergio obrigado por me informar sobre esses problemas. Atualizei a resposta com as devidas correções. Commented 11/07/2015 às 18:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .