Ist es möglich, "Long Press" in JavaScript (oder jQuery) zu implementieren? Wie?
(Quelle: 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
quelle
quelle
jQuery(...).longclick(function() { ... });
Antworten:
Es gibt keine "jQuery" -Magie, nur JavaScript-Timer.
quelle
clearTimeout(pressTimer)
zu erreichenmousemove
, es sei denn, ich vermisse etwas. Was zugegebenermaßen kaum beispiellos wäre.Basierend auf der Antwort von Maycow Moura habe ich dies geschrieben. Außerdem wird sichergestellt, dass der Benutzer keinen Rechtsklick ausführt, was ein langes Drücken auslösen und auf Mobilgeräten funktioniert. DEMO
Sie sollten auch einige Indikatoren mit CSS-Animationen einfügen:
quelle
:hover
Status auf Touch-Geräten klebrig ist, vielleicht gilt das auch hier.touchend
IMO ausgelöst werden, gibt es keinen Grund, es klebrig zu machen, wenn es sich um einen speziellen Code für Touch-Geräte handelt. Vielleicht werde ich morgen etwas ausprobieren.Sie können das Taphold- Ereignis der mobilen jQuery-API verwenden.
quelle
Ich habe ein Long-Press-Ereignis (0,5 KB reines JavaScript) erstellt , um dieses Problem zu lösen. Es fügt
long-press
dem DOM ein Ereignis hinzu .Hören Sie ein
long-press
auf jedem Element:Hören Sie
long-press
auf ein bestimmtes Element:Funktioniert in IE9 +, Chrome, Firefox, Safari und hybriden mobilen Apps (Cordova & Ionic unter iOS / Android)
Demo
quelle
Es sieht zwar einfach genug aus, um es mit einem Timeout und einigen Maus-Ereignishandlern selbst zu implementieren, wird jedoch etwas komplizierter, wenn Sie Fälle wie Click-Drag-Release betrachten, bei denen sowohl Drücken als auch Langes Drücken auf dasselbe Element unterstützt werden und Arbeiten mit Touch-Geräten wie dem iPad. Am Ende habe ich das LongQick-jQuery-Plugin ( Github ) verwendet, das sich für mich um dieses Zeug kümmert. Wenn Sie nur Touchscreen-Geräte wie Mobiltelefone unterstützen müssen, können Sie auch das Ereignis jQuery Mobile taphold ausprobieren .
quelle
jQuery-Plugin. Einfach gesagt
$(expression).longClick(function() { <your code here> });
. Der zweite Parameter ist die Haltedauer. Das Standardzeitlimit beträgt 500 ms.quelle
Für plattformübergreifende Entwickler (Hinweis Alle bisher gegebenen Antworten funktionieren unter iOS nicht) :
Mouseup / Down schien auf Android in Ordnung zu funktionieren - aber nicht auf allen Geräten, dh (Samsung Tab4). Funktionierte unter iOS überhaupt nicht .
Weitere Untersuchungen scheinen darauf zurückzuführen zu sein, dass das Element eine Auswahl aufweist und die native Vergrößerung den Hörer unterbricht.
Dieser Ereignis-Listener ermöglicht das Öffnen eines Miniaturbilds in einem Bootstrap-Modal, wenn der Benutzer das Bild 500 ms lang hält.
Es wird eine reaktionsfähige Bildklasse verwendet, die eine größere Version des Bildes anzeigt. Dieser Code wurde vollständig getestet auf (iPad / Tab4 / TabA / Galaxy4):
quelle
DEMO
quelle
Die Antwort des Diodeus ist fantastisch, aber es verhindert, dass Sie eine onClick-Funktion hinzufügen. Wenn Sie einen onclick ausführen, wird die Hold-Funktion niemals ausgeführt. Die Antwort des Razzak ist fast perfekt, aber die Hold-Funktion wird nur beim Mouseup ausgeführt, und im Allgemeinen wird die Funktion auch ausgeführt, wenn der Benutzer die Hold-Funktion beibehält.
Also habe ich mich beiden angeschlossen und folgendes gemacht:
quelle
Für moderne, mobile Browser:
https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu
quelle
bind()
jquery 1.7+ =on()
undunbind()
=off()
Sie können das Zeitlimit für dieses Element mit der Maus nach unten einstellen und mit der Maus nach oben löschen:
Damit erhält jedes Element seine eigene Zeitüberschreitung.
quelle
$(this).mouseup(function(){});
entfernt den Ereignishandler nicht, sondern fügt einen weiteren hinzu. Verwenden Sie.unbind
stattdessen.off()
jetzt verwenden anstatt zu lösen.Sie können den Taphold von jquery-mobile verwenden. Fügen Sie die Datei jquery-mobile.js hinzu, und der folgende Code funktioniert einwandfrei
quelle
Am elegantesten und saubersten ist ein jQuery-Plugin: https://github.com/untill/jquery.longclick/ , das auch als Paket erhältlich ist: https://www.npmjs.com/package/jquery.longclick .
Kurz gesagt, Sie verwenden es so:
Der Vorteil dieses Plugins ist, dass im Gegensatz zu einigen anderen Antworten hier Klickereignisse weiterhin möglich sind. Beachten Sie auch, dass ein langer Klick auftritt, genau wie ein langes Tippen auf ein Gerät vor dem Mouseup. Das ist also eine Funktion.
quelle
Für mich funktioniert es mit diesem Code (mit jQuery):
quelle
Sie können die Zeit überprüfen, um Click oder Long Press [jQuery] zu identifizieren.
quelle
so was?
quelle
Sie können
jquery
Touch-Ereignisse verwenden. ( siehe hier )quelle
Ich brauchte etwas für Longpress-Tastaturereignisse, also schrieb ich dies.
quelle
Ich denke, das kann dir helfen:
quelle