Czy można zaimplementować „długie naciśnięcie” w JavaScript (lub jQuery)? W jaki sposób?
(źródło: androinica.com )
HTML
<a href="" title="">Long press</a>
JavaScript
$("a").mouseup(function(){
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
return false;
});
javascript
jquery
jquery-ui
jquery-mobile
jquery-events
Randy Mayer
źródło
źródło
jQuery(...).longclick(function() { ... });
Odpowiedzi:
Nie ma magii „jQuery”, tylko liczniki czasu JavaScript.
źródło
clearTimeout(pressTimer)
namousemove
, chyba że czegoś mi brakuje. Co prawda nie byłoby bezprecedensowe.Na podstawie odpowiedzi Maycow Moura napisałem to. Zapewnia również, że użytkownik nie wykonał prawego kliknięcia, co spowodowałoby długie naciśnięcie i działa na urządzeniach mobilnych. PRÓBNY
Powinieneś również dołączyć wskaźnik wykorzystujący animacje CSS:
źródło
:hover
stan jest lepki na urządzeniach dotykowych, może to również dotyczy tutaj.touchend
powinien odpalić IMO, nie ma powodu, żeby się kleił, kiedy jest to specjalny kod dla urządzeń dotykowych, może spróbuję czegoś jutro.Możesz użyć zdarzenia taphold mobilnego interfejsu API jQuery.
źródło
Stworzyłem zdarzenie z długim naciśnięciem (0.5k czystego JavaScript), aby rozwiązać ten problem, dodaje plik
long-press
zdarzenie do DOM.Nasłuchiwać
long-press
na dowolnym elemencie:Nasłuchiwać
long-press
na konkretnym elemencie:Działa w IE9 +, Chrome, Firefox, Safari i hybrydowych aplikacjach mobilnych (Cordova i Ionic na iOS / Android)
Próbny
źródło
Chociaż wygląda to na dość proste do samodzielnego zaimplementowania z limitem czasu i kilkoma programami obsługi zdarzeń myszy, staje się nieco bardziej skomplikowane, gdy weźmiesz pod uwagę przypadki takie jak kliknięcie-przeciągnij-zwolnienie, obsługujące zarówno naciśnięcie, jak i długie naciśnięcie tego samego elementu i praca z urządzeniami dotykowymi, takimi jak iPad. Skończyło się na użyciu wtyczki longclick jQuery ( Github ), która zajmuje się tym za mnie. Jeśli potrzebujesz tylko obsługi urządzeń z ekranem dotykowym, takich jak telefony komórkowe, możesz również wypróbować zdarzenie taphold jQuery Mobile .
źródło
Wtyczka jQuery. Po prostu włóż
$(expression).longClick(function() { <your code here> });
. Drugi parametr to czas wstrzymania; domyślny limit czasu to 500 ms.źródło
Dla programistów korzystających z wielu platform (Uwaga: Wszystkie udzielone dotychczas odpowiedzi nie będą działać na iOS) :
MouseUp / dół wydawało się działać dobrze na android - ale nie wszystkie urządzenia (tj samsung tab4). W ogóle nie działał na iOS .
Dalsze badania wydają się, że jest to spowodowane elementem posiadającym selekcję, a natywne powiększenie przeszkadza słuchaczowi.
Ten detektor zdarzeń umożliwia otwieranie obrazu miniatury w trybie ładowania początkowego, jeśli użytkownik przechowuje obraz przez 500 ms.
Używa responsywnej klasy obrazu, dlatego pokazuje większą wersję obrazu. Ten fragment kodu został w pełni przetestowany na (iPad / Tab4 / TabA / Galaxy4):
źródło
PRÓBNY
źródło
Odpowiedź Diodeusa jest niesamowita, ale uniemożliwia dodanie funkcji onClick, nigdy nie uruchomi funkcji wstrzymania, jeśli umieścisz przycisk onclick. Odpowiedź Razzaka jest prawie doskonała, ale funkcja wstrzymania uruchamia się tylko po najechaniu myszą i generalnie funkcja działa nawet wtedy, gdy użytkownik przytrzymuje.
Więc dołączyłem do obu i zrobiłem to:
źródło
W przypadku nowoczesnych przeglądarek mobilnych:
https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu
źródło
bind()
jquery 1.7+ =on()
andunbind()
=off()
Możesz ustawić limit czasu dla tego elementu po naciśnięciu myszy i wyczyścić go po myszy w górę:
Dzięki temu każdy element ma swój własny limit czasu.
źródło
$(this).mouseup(function(){});
nie usuwa obsługi zdarzeń, dodaje kolejny. Użyj.unbind
zamiast tego.off()
teraz zamiast unbind.Możesz użyć taphold jquery-mobile. Dołącz plik jquery-mobile.js, a poniższy kod będzie działał poprawnie
źródło
Najbardziej elegancka i czysta jest wtyczka jQuery: https://github.com/untill/jquery.longclick/ , dostępna również jako pakiet: https://www.npmjs.com/package/jquery.longclick .
Krótko mówiąc, używasz go w ten sposób:
Zaletą tej wtyczki jest to, że w przeciwieństwie do niektórych innych odpowiedzi tutaj, zdarzenia kliknięcia są nadal możliwe. Zwróć również uwagę, że występuje długie kliknięcie, podobnie jak długie dotknięcie urządzenia, przed najechaniem myszą. Więc to jest funkcja.
źródło
Dla mnie to działa z tym kodem (z jQuery):
źródło
Możesz sprawdzić czas, aby zidentyfikować kliknięcie lub długie naciśnięcie [jQuery]
źródło
lubię to?
źródło
Możesz używać
jquery
zdarzeń dotykowych. ( patrz tutaj )źródło
Potrzebowałem czegoś na długie imprezy klawiszowe, więc napisałem to.
źródło
Myślę, że to może ci pomóc:
źródło