Soporte/complemento de evento LongPres/longclick en jQuery

Question

Estoy trabajando en un sitio web que requiere menús con mouseover. No recomendaría el menú mouseover desde un punto de vista de accesibilidad, pero es bastante fácil de implementar usando jQuery.

El problema: también tenemos que admitir dispositivos de pantalla táctil (tabletas). En un dispositivo de este tipo, no tiene un mouse y, por lo tanto, el evento mouseover no funciona. Esperaba que jQuery tuviera un evento de pulsación larga, pero no es así. Encontré un jQuery longclick plugin usando Google, pero fue para jQuery 1.4, así que no estoy dispuesto a usarlo. Además, el sitio del complemento jQuery está en mantenimiento en este momento, por lo que no es muy útil.

Así que la pregunta: ¿hay un complemento elegante para jQuery 1.7/1.8 para admitir eventos longpress/longclick?

Answer 1

Resulta que solo puede usar el longclick plugin existente para jQuery 1.4 con jQuery 1.8.

$("#area").mousedown(function(){ 
 
    $("#result").html("Waiting for it..."); 
 
}); 
 
$("#area").longclick(500, function(){ 
 
    $("#result").html("You longclicked. Nice!"); 
 
}); 
 
$("#area").click(function(){ 
 
    $("#result").html("You clicked. Bummer."); 
 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<script src="http://rawgit.com/pisi/Longclick/master/jquery.longclick-min.js"></script> 
 
    
 
<p id="area">Click me!</p> 
 
<p id="result">You didn't click yet.</p>

Answer 2

Algo que podría hacer es usar cheques retrasados ​​con setTimeout durante los diversos eventos del mouse. Incorporar jQuery's $.data() para almacenar el tiempo de espera entre eventos (en cada elemento) debería ayudarlo a lograrlo. He aquí un ejemplo:

HTML:

<ul id="menu"> 
    <li><a href="#" onclick="return false;" class="test"></a></li> 
    <li><a href="#" onclick="return false;" class="test"></a></li> 
</ul> 

JS:

var mousepress_time = 1000; // Maybe hardcode this value in setTimeout 
var orig_message = "Click Here"; // Remove this line 
var held_message = "Down"; // Remove this line 

$(document).ready(function() { 
    $(".test") 
     .html(orig_message) // Remove this line 
     .on("mousedown", function() { 
      console.log("#########mousedown"); // Remove this line 
      var $this = $(this); 
      $(this).data("checkdown", setTimeout(function() { 
       // Add your code to run 
       $this.html(held_message); // Remove this line 
      }, mousepress_time)); 
     }).on("mouseup", function() { 
      clearTimeout($(this).data("checkdown")); 
      console.log("#######mouseup"); // Remove this line 
      $(this).html(orig_message); // Remove this line 
     }).on("mouseout", function() { 
      clearTimeout($(this).data("checkdown")); 
      console.log("#######mouseout"); // Remove this line 
      $(this).html(orig_message); // Remove this line 
     }); 
}); 

DEMO: http://jsfiddle.net/7jKYa/10/

Hay mucho más que ver con esto, ya que también se está incorporando flotando, pero en su mayor parte, creo que esto hace lo que quieres.

Podría convertirse fácilmente en un complemento si es necesario, de lo contrario, creo que podría funcionar bien solo. ¡Espero que esto ayude!

Answer 3

Se podría medir el tiempo ella.

function onImageMouseDown(e){ 
    var d = new Date(); 
    md_time = d.getTime(); // Milliseconds since 1 Apr 1970 
} 

function onImageMouseUp(e){ 
    var d = new Date(); 
    var long_click = (d.getTime()-md_time)>1000; 
    if (long_click){ 
     // Click lasted longer than 1s (1000ms) 
    }else{ 
     // Click lasted less than 1s 
    } 
    md_time = 0; 
}