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, el;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);