Obsługa zdarzeń/wtyczek Longpress/longclick w jQuery

Question

Pracuję na stronie internetowej, która wymaga menu myszy. Nie polecałbym menu mouseover z punktu widzenia dostępności, ale jest całkiem łatwy do wdrożenia za pomocą jQuery.

Problem: musimy również obsługiwać urządzenia z ekranem dotykowym (tablety). Na takim urządzeniu nie masz myszy i dlatego nie działa działanie mouseover. Miałem nadzieję, że jQuery będzie miało wydarzenie typu longpress, ale tak się nie stało. Znalazłem jQuery longclick plugin używając Google, ale było to dla jQuery 1.4, więc nie jestem chętny do korzystania z tego. Również strona z wtyczkami jQuery jest obecnie w trakcie konserwacji, więc nie jest to zbyt pomocne.

Pytanie więc: czy istnieje elegancka wtyczka do jQuery 1.7/1.8 do obsługi zdarzeń longpress/longclick?

Answer 1

Okazuje się, że można po prostu użyć istniejącego longclick plugin dla jQuery 1.4 z 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

Coś, co można zrobić, to używać opóźnionych czeków z setTimeout podczas różnych zdarzeń myszy. Uwzględnienie jQuery w numerze $.data() w celu zapisania limitu czasu pomiędzy zdarzeniami (na każdym elemencie) powinno pomóc w osiągnięciu tego wszystkiego. Oto przykład:

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/

Jest dużo więcej wspólnego z tym, ponieważ ty również wprowadzenie unosząc się, ale w większej części, myślę, że robi to, co chcesz.

W razie potrzeby można go łatwo przekonwertować na wtyczkę, w przeciwnym razie może działać dobrze. Mam nadzieję, że to pomoże!

Answer 3

Można go czas.

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