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?
Supondo estes tipos de clique:
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?
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);
scale
do CSS demonstrar isso?
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?
scale
à medida que o tempo passa.
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.