Skip to main content
adicionou 63 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

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

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

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;

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

    window.addEventListener('mouseup', reset);
    return function (e) {
        if (!self) {
            self = this;
            self.addEventListener('mouseup', function (e) {
                e.stopPropagation();
                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/3/

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/

adicionou 494 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

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 mousedown,min timeout;= 2000;
    var max = 4000;
    window.addEventListener('mouseup'var time, self, timeout, event, el;

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

    window.addEventListener('mouseup', reset);
    return function (e) {
        varif (!self) {
            self = this;
        mousedown = true;  self.addEventListener('mouseup', function (e) {
        if (       e.typestopPropagation();
 == 'mousedown') timeout             var interval = setTimeout(functionnew Date().getTime() {- time;
                if (mousedowntimeout && interval > min) cb.call(self, eevent);
                reset();
            });
        }
        event = e;
        time = new Date().getTime();

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

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/2/http://jsfiddle.net/n2382xsk/3/

Se quiseres usar minimo e máximo podes usar esta abordagem: http://jsfiddle.net/n2382xsk/1/

var longclick = function (cb) {
    var mousedown, timeout;
    
    window.addEventListener('mouseup', function () {
        mousedown = false;
        clearTimeout(timeout);
    });
    return function (e) {
        var self = this;
        mousedown = true;
        if (e.type == 'mousedown') timeout = setTimeout(function () {
            if (mousedown) cb.call(self, e);
        }, 2000);
    };
};

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

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

Se quiseres usar minimo e máximo podes usar esta abordagem: http://jsfiddle.net/n2382xsk/1/

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;

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

    window.addEventListener('mouseup', reset);
    return function (e) {
        if (!self) {
            self = this;
            self.addEventListener('mouseup', function (e) {
                e.stopPropagation();
                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/3/

adicionou 40 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

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á.

var longclick = function (cb) {
    var mousedown = false;
    var time = 0;
    var, timeout;
    
    window.addEventListener('mouseup', function () {
        mousedown = false;
        if (timeout) clearTimeout(timeout);
    });
    return function (e) {
        var self = this;
        mousedown = true;
        if (e.type == 'mousedown') timeout = setTimeout(function () {
            if (mousedown) cb.call(self, e);
        }, 2000);
    };
};

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

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

Se quiseres usar minimo e máximo podes usar esta abordagem: http://jsfiddle.net/n2382xsk/1/

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á.

var longclick = function (cb) {
    var mousedown = false;
    var time = 0;
    var timeout;
    
    window.addEventListener('mouseup', function () {
        mousedown = false;
        if (timeout) clearTimeout(timeout);
    });
    return function (e) {
        var self = this;
        mousedown = true;
        if (e.type == 'mousedown') timeout = setTimeout(function () {
            if (mousedown) cb.call(self, e);
        }, 2000);
    };
};

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

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

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á.

var longclick = function (cb) {
    var mousedown, timeout;
    
    window.addEventListener('mouseup', function () {
        mousedown = false;
        clearTimeout(timeout);
    });
    return function (e) {
        var self = this;
        mousedown = true;
        if (e.type == 'mousedown') timeout = setTimeout(function () {
            if (mousedown) cb.call(self, e);
        }, 2000);
    };
};

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

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

Se quiseres usar minimo e máximo podes usar esta abordagem: http://jsfiddle.net/n2382xsk/1/

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
Carregando