jQuery implementiert den Auslöser event_jquery durch langes Drücken der Taste

Das Beispiel in diesem Artikel beschreibt, wie jQuery Ereignisse implementiert, die durch langes Drücken einer Taste ausgelöst werden. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die rasante Entwicklung von Mobiltelefonen erfordert nun, dass viele Mobiltelefongesten in mobile Webseiten umgewandelt werden

Im Internet gibt es viele Plugins für langes Drücken von Tasten, und sogar jQuery Mobile bietet Ereignisse für langes Drücken

Aber aufgrund verschiedener Kompatibilitätsprobleme

Verwenden Sie jquery nur, um die Aktion „Langes Drücken“ zu implementieren, wodurch eine starke Kompatibilität zwischen Mobiltelefonen und Computern gewährleistet werden kann

1. Grundlegende Ziele

Erstellen Sie eine Schaltfläche, die im Wesentlichen eine Ebene mit einem grauen Hintergrund von 100 x 100 Pixeln ist. Wenn Sie sie 2 Sekunden lang gedrückt halten, ändert sich der Text in der Ebene von innen nach außen. Wie unten gezeigt:

2. Produktionsprozess

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

out

<script> /*Stellen Sie einen Timer für langes Drücken ein. Wenn diese Ebene länger als 2 Sekunden angeklickt wird, wird sie ausgelöst. Der Text in mydiv ändert sich von „Out“ zu „In“. var-Timeout; <br> <br> $("#mydiv").mousedown(function() { <br> Timeout = setTimeout(function() { <br>          $("#mydiv").text("in"); }, 2000); <br> }); <br> <br> $("#mydiv").mouseup(function() { <br> ClearTimeout(timeout); <br> $("#mydiv").text("out"); }); <br> <br> $("#mydiv").mouseout(function() { <br> ClearTimeout(timeout); <br> $("#mydiv").text("out"); }); <br> <br> </script>

Im Wesentlichen sollte die lange Druckzeit nicht zu lang sein, da dies zu Konflikten mit einigen langen Druckgesten des Mobiltelefonsystems führen kann. Sie sollte jedoch nicht zu kurz sein, da zwischen einer langen Druckzeit und einem Klick kein Unterschied besteht.

Um das Ende eines langen Tastendrucks zu bestimmen, müssen Sie theoretisch einfach die Mouseup-Aktion auf dem Mobiltelefon einstellen,

Allerdings treten nur beim Festlegen der Mausbewegung auf dem PC die folgenden Fehler auf:




Dunklen Sie den Text auf der Ebene, während Sie lange drücken, und ziehen Sie dann die Maus aus der Ebene. Dies kann natürlich nicht auf dem Mobiltelefon ausgeführt werden, wenn darauf geschrieben wird Bei Webseiten auf Mobiltelefonen kann dieser Schritt vollständig ignoriert werden. Aus Gründen der besseren Kompatibilität wird jedoch die Mouseout-Aktion hinzugefügt, um diesen Fehler zu beheben.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.