Long Press em JavaScript?

É possível implementar “long press” em JavaScript (ou jQuery)? Como?

texto alternativo http://sofpt.miximages.com/javascript/longpress_options.png

HTML

Long press 

JavaScript

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

Não há magia ‘jQuery’, apenas timers 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; }); 

Você pode usar o evento taphold da API móvel do jQuery.

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

Com base na resposta de Maycow Moura, eu escrevi isso. Isso também garante que o usuário não faça um clique com o botão direito, o que acionaria uma pressão longa e funcionaria em dispositivos móveis. 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); 

Você também deve include algum indicador usando animações 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; } } 

Embora pareça simples o suficiente para ser implementado por conta própria com um tempo limite e alguns manipuladores de events de mouse, fica um pouco mais complicado quando você considera casos como o click-drag-release, suportando tanto a imprensa quanto a longa pressão no mesmo elemento e trabalhando com dispositivos de toque como o iPad. Acabei usando o plugin do jQuery longclick ( Github ), que cuida dessas coisas para mim. Se você precisar apenas de suporte a dispositivos com canvas sensível ao toque, como telefones celulares, também poderá tentar o evento de taphold do jQuery Mobile .

Plugin jQuery. Basta colocar $(expression).longClick(function() { }); . Segundo parâmetro é a duração da espera; o tempo limite padrão é 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); 
 $(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

Para desenvolvedores de plataforma cruzada (Nota Todas as respostas dadas até agora não funcionarão no iOS) :

Mouseup / down parecia funcionar bem no android – mas nem todos os dispositivos ou seja (samsung tab4). Não funcionou no iOS .

Pesquisas posteriores parecem que isso se deve ao fato de o elemento ter uma seleção e a ampliação nativa interpõe o ouvinte.

Este ouvinte de evento permite que uma imagem em miniatura seja aberta em um modal de bootstrap, se o usuário mantiver a imagem por 500 ms.

Ele usa uma class de imagem responsiva, portanto, mostrando uma versão maior da imagem. Este pedaço de código foi totalmente testado (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) }); 

Use long-press , o 0.5k puro JS que usa CustomEvent para adicionar um evento de long-press ao DOM.

Ouça por um long-press em qualquer elemento:

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

Ouça por um long-press em um elemento específico :

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

Funciona no IE9 +, Chrome, Firefox, Safari – incluindo aplicativos móveis híbridos Cordova & Ionic

Demonstração

A resposta do Diodeus é incrível, mas impede que você adicione uma function onClick, ele nunca executará a function hold se você colocar um onclick. E a resposta do Razzak é quase perfeita, mas funciona apenas no mouseup, e geralmente, a function roda mesmo que o usuário continue segurando.

Então, juntei os dois e fiz isso:

 $(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 }); 

Você pode definir o tempo limite para esse elemento no mouse e limpá-lo no mouse para cima:

 $("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; }); 

Com isso, cada elemento recebe seu próprio tempo limite.

Para navegadores modernos e móveis:

 document.addEventListener('contextmenu', callback); 

https://developer.mozilla.org/pt-BR/docs/Web/Events/contextmenu

Você pode usar o taphold do jquery-mobile. Inclua o jquery-mobile.js e o código a seguir funcionará bem

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

O mais elegante e limpo é um plugin jQuery: https://github.com/untill/jquery.longclick/ , também disponível como packacke: https://www.npmjs.com/package/jquery.longclick .

Em suma, você usa assim:

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

A vantagem deste plugin é que, em contraste com algumas das outras respostas aqui, os events de clique ainda são possíveis. Note também que ocorre um longo clique, como um longo toque em um dispositivo, antes do mouseup. Então, isso é uma característica.

Para mim é um trabalho com esse código (com 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); 

Você pode verificar o tempo para identificar Click ou Long Press [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); } } 

como isso?

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