Pulsación larga en JavaScript?

Question

¿Es posible poner en práctica "pulsación larga" en JavaScript (jQuery o)? ¿Cómo?

??
_{(fuente: androinica.com )}

HTML

<a href="" title="">Long press</a>

JavaScript

$("a").mouseup(function(){
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  return false; 
});

Answer 1

No hay magia 'jQuery', sólo temporizadores de JavaScript.

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
  return false; 
});

Answer 2

Sobre la base de la respuesta de Maycow Moura, que escribió esto. También asegura que el usuario no haga un clic derecho, lo que desencadenaría una pulsación larga y obras en los dispositivos móviles. DEMO

var node = document.getElementsByTagName("p")[0];
var longpress = false;
var presstimer = null;
var longtarget = null;

var cancel = function(e) {
    if (presstimer !== null) {
        clearTimeout(presstimer);
        presstimer = null;
    }

    this.classList.remove("longpress");
};

var click = function(e) {
    if (presstimer !== null) {
        clearTimeout(presstimer);
        presstimer = null;
    }

    this.classList.remove("longpress");

    if (longpress) {
        return false;
    }

    alert("press");
};

var start = function(e) {
    console.log(e);

    if (e.type === "click" && e.button !== 0) {
        return;
    }

    longpress = false;

    this.classList.add("longpress");

    if (presstimer === null) {
        presstimer = setTimeout(function() {
            alert("long click");
            longpress = true;
        }, 1000);
    }

    return false;
};

node.addEventListener("mousedown", start);
node.addEventListener("touchstart", start);
node.addEventListener("click", click);
node.addEventListener("mouseout", cancel);
node.addEventListener("touchend", cancel);
node.addEventListener("touchleave", cancel);
node.addEventListener("touchcancel", cancel);

También debe incluir algún indicador utilizando animaciones CSS:

p {
    background: red;
    padding: 100px;
}

.longpress {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

Answer 3

Se puede utilizar taphold caso de la API jQuery móvil.

jQuery("a").on("taphold", function( event ) { ... } )

Answer 4

Mientras que tiene un aspecto bastante simple de implementar por su cuenta con un tiempo de espera y un par de controladores de eventos de ratón, se pone un poco más complicado si tenemos en cuenta los casos, como hacer clic y arrastrar de liberación, el apoyo a la prensa y largo prensa el el mismo elemento, y el trabajo con los dispositivos táctiles como el iPad. Terminé usando el longclick jQuery Plugin ( Github ), que se encarga de esas cosas para mí. Si sólo necesita a dispositivos de pantalla táctil de apoyo como los teléfonos móviles, también se podría tratar el caso taphold jQuery Mobile .

Answer 5

plug-in

jQuery. Sólo hay que poner $(expression).longClick(function() { <your code here> });. Segundo parámetro es la duración de retención; tiempo de espera predeterminado es de 500 ms.

(function($) {
    $.fn.longClick = function(callback, timeout) {
        var timer;
        timeout = timeout || 500;
        $(this).mousedown(function() {
            timer = setTimeout(function() { callback(); }, timeout);
            return false;
        });
        $(document).mouseup(function() {
            clearTimeout(timer);
            return false;
        });
    };

})(jQuery);

Answer 6

largo de prensa en eventos (0.5K JavaScript puro) para resolver esto, se añade un evento long-press al DOM.

Escucha de long-press en cualquier elemento:

// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
  console.log(e.target);
});

Escucha de long-press en un específica elemento:

// get the element
var el = document.getElementById('idOfElement');

// add a long-press event listener
el.addEventListener('long-press', function(e) {

    // stop the event from bubbling up
    e.preventDefault()

    console.log(e.target);
});

Obras en IE9 +, Chrome, Firefox, Safari y aplicaciones móviles híbridas (Córdoba y jónico en iOS / Android)

demostración

Answer 7

$(document).ready(function () {
    var longpress = false;

    $("button").on('click', function () {
        (longpress) ? alert("Long Press") : alert("Short Press");
    });

    var startTime, endTime;
    $("button").on('mousedown', function () {
        startTime = new Date().getTime();
    });

    $("button").on('mouseup', function () {
        endTime = new Date().getTime();
        longpress = (endTime - startTime < 500) ? false : true;
    });
});

DEMO

Answer 8

Para los desarrolladores de plataformas cruzadas (Nota Todas las respuestas dadas hasta ahora no funcionará en iOS)

Mouseup / abajo parecía funcionar bien en androide - pero no todos los dispositivos, es decir, (Samsung TAB4). no funcionaba en absoluto en IOS .

La investigación adicional de su parece que esto se debe al elemento de contar con la oferta y los nativos interupts ampliación del oyente.

Este detector de eventos permite a una imagen en miniatura que se abrirá en un referente de arranque, si el usuario mantiene la imagen durante 500 ms.

Se utiliza, por tanto, una clase de imagen que responde mostrando una versión ampliada de la imagen. Esta pieza de código ha sido probado por completo en (iPad / TAB4 / Taba / Galaxy4):

var pressTimer;  
$(".thumbnail").on('touchend', function (e) {
   clearTimeout(pressTimer);
}).on('touchstart', function (e) {
   var target = $(e.currentTarget);
   var imagePath = target.find('img').attr('src');
   var title = target.find('.myCaption:visible').first().text();
   $('#dds-modal-title').text(title);
   $('#dds-modal-img').attr('src', imagePath);
   // Set timeout
   pressTimer = window.setTimeout(function () {
      $('#dds-modal').modal('show');
   }, 500)
});

Answer 9

La respuesta de la Diodeus es impresionante, pero evitar que le permite añadir una función onclick, que nunca va a ejecutar la función de retención si se pone un onclick. Y la respuesta del Razzak es casi perfecto, pero que se ejecute la función de retención sólo en mouseup, y, en general, la función se ejecuta incluso si retención torreón de usuario.

Por lo tanto, se unió a ambos, e hizo esto:

$(element).on('click', function () {
    if(longpress) { // if detect hold, stop onclick function
        return false;
    };
});

$(element).on('mousedown', function () {
    longpress = false; //longpress is false initially
    pressTimer = window.setTimeout(function(){
    // your code here

    longpress = true; //if run hold function, longpress is true
    },1000)
});

$(element).on('mouseup', function () {
    clearTimeout(pressTimer); //clear time on mouseup
});

Answer 10

Se podría establecer el tiempo de espera para ese elemento en el ratón hacia abajo y desactivarla en ratón hacia arriba:

$("a").mousedown(function() {
    // set timeout for this element
    var timeout = window.setTimeout(function() { /* … */ }, 1234);
    $(this).mouseup(function() {
        // clear timeout for this element
        window.clearTimeout(timeout);
        // reset mouse up event handler
        $(this).unbind("mouseup");
        return false;
    });
    return false;
});

Con esto cada elemento tiene su propio tiempo de espera.

Answer 11

Para los navegadores modernos, teléfonos:

document.addEventListener('contextmenu', callback);

https://developer.mozilla.org/en-US/ docs / web / Eventos / contextual

Answer 12

Se puede utilizar taphold de jquery-móvil. Incluir los jquery-mobile.js y el siguiente código trabajará muy bien

$(document).on("pagecreate","#pagename",function(){
  $("p").on("taphold",function(){
   $(this).hide(); //your code
  });    
});

Answer 13

Lo más elegante y limpio es un plugin de jQuery: https://github.com/untill/jquery.longclick/ , También disponible como packacke: https://www.npmjs.com/package/jquery.longclick .

En resumen, lo usa de esta manera:

$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );

La ventaja de este plugin es que, a diferencia de algunas de las otras respuestas aquí, haga clic en eventos aún son posibles. Tenga en cuenta también que se produce una pulsación larga, al igual que un toque largo en un dispositivo, antes de mouseup. Entonces, eso es una característica.

Answer 14

Para mí es un trabajo con ese código (con jQuery):

var int       = null,
    fired     = false;

var longclickFilm = function($t) {
        $body.css('background', 'red');
    },
    clickFilm = function($t) {
        $t  = $t.clone(false, false);
        var $to = $('footer > div:first');
        $to.find('.empty').remove();
        $t.appendTo($to);
    },
    touchStartFilm = function(event) {
        event.preventDefault();
        fired     = false;
        int       = setTimeout(function($t) {
            longclickFilm($t);
            fired = true;
        }, 2000, $(this)); // 2 sec for long click ?
        return false;
    },
    touchEndFilm = function(event) {
        event.preventDefault();
        clearTimeout(int);
        if (fired) return false;
        else  clickFilm($(this));
        return false;
    };

$('ul#thelist .thumbBox')
    .live('mousedown touchstart', touchStartFilm)
    .live('mouseup touchend touchcancel', touchEndFilm);

Answer 15

Puede comprobar el tiempo para identificar clic o Long Pulse [jQuery]

function AddButtonEventListener() {
try {
    var mousedowntime;
    var presstime;
    $("button[id$='" + buttonID + "']").mousedown(function() {
        var d = new Date();
        mousedowntime = d.getTime();
    });
    $("button[id$='" + buttonID + "']").mouseup(function() {
        var d = new Date();
        presstime = d.getTime() - mousedowntime;
        if (presstime > 999/*You can decide the time*/) {
            //Do_Action_Long_Press_Event();
        }
        else {
            //Do_Action_Click_Event();
        }
    });
}
catch (err) {
    alert(err.message);
}
} 

Answer 16

como este?

doc.addEeventListener("touchstart", function(){
    // your code ...
}, false);    

Answer 17

Puede utilizar los eventos táctiles jquery. ( ver aquí )

  let holdBtn = $('#holdBtn')
  let holdDuration = 1000
  let holdTimer

  holdBtn.on('touchend', function () {
    // finish hold
  });
  holdBtn.on('touchstart', function () {
    // start hold
    holdTimer = setTimeout(function() {
      //action after certain time of hold
    }, holdDuration );
  });

Answer 18

Yo necesitaba algo para eventos de teclado LongPress, así que escribí esto.

var longpressKeys = [13];
var longpressTimeout = 1500;
var longpressActive = false;
var longpressFunc = null;

document.addEventListener('keydown', function(e) {
    if (longpressFunc == null && longpressKeys.indexOf(e.keyCode) > -1) {
        longpressFunc = setTimeout(function() {
            console.log('longpress triggered');
            longpressActive = true;
        }, longpressTimeout);

    // any key not defined as a longpress
    } else if (longpressKeys.indexOf(e.keyCode) == -1) {
        console.log('shortpress triggered');
    }
});

document.addEventListener('keyup', function(e) {
    clearTimeout(longpressFunc);
    longpressFunc = null;

    // longpress key triggered as a shortpress
    if (!longpressActive && longpressKeys.indexOf(e.keyCode) > -1) {
        console.log('shortpress triggered');
    }
    longpressActive = false;
});