Startseite>Webdesign-Tutorial>HTML-Tutorial

Implementierungsmethode zur Simulation eines langen Druckereignisses in HTML5 auf einem mobilen Endgerät

Autor：Eve Cole Aktualisierungszeit：2025-01-18 17:24:01

Warum diesen Artikel schreiben?

Ich habe kürzlich eine Anfrage erhalten, eine schwebende Löschschaltfläche anzuzeigen und zu löschen, indem ich lange auf eine bestimmte Beschriftung drücke. Diese Anforderung kommt bei Apps tatsächlich sehr häufig vor, aber im mobilen h5 gibt es kein langes Drücken-Ereignis, daher müssen wir dieses Ereignis selbst simulieren.

Der ungefähre Effekt ist wie folgt:

PS: Um ein GIF zu erstellen, habe ich die App heruntergeladen und musste sie per E-Mail an den Computer senden. .

Ideen

  • Geben Sie das Klickereignis auf und entscheiden Sie, ob Sie klicken oder lange drücken möchten, indem Sie die Dauer des Drückens beurteilen.
  • Verwenden von Touchstart- und Touchend-Ereignissen
  • Starten Sie einen Timer in Touchstart, z. B. die Anzeige eines Menüs durch langes Drücken nach 700 ms
  • Löschen Sie diesen Timer in Touchend, sodass das Menü für langes Drücken angezeigt wird, wenn die Presszeit 700 ms überschreitet. Das Löschen des Timers hat keine Auswirkung, wenn die Presszeit weniger als 700 ms beträgt, dann wird das Menü für langes Drücken in Touchstart angezeigt Es wurde gelöscht, bevor es angezeigt werden konnte.

Daraus können wir simulierte Long-Press-Events umsetzen.

Up-Code

请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果

Der größte Teil des CSS dient nur dazu, den Stil zu verschönern und zunächst die Schaltfläche „Löschen“ auszublenden.

HTML: 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>Dokument</title> <link rel=stylesheet type=text/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>Lang drücken</div> <div class=delete_btn>Löschen</div> </div> <script src= ./longpress.js></script></body></html>

JS 

 let timer = nulllet startTime = ''let endTime = ''const label = document.querySelector('.label')const deleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = +new Date() timer = setTimeout(function () { deleteBtn.style.display = 'block' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // Klickereignisse behandeln label.classList.add('selected' ) }})

CSS 

 .container { position: relative; margin-top: 50px;}.label { display: inline-block; width: 32px; ; Hintergrundfarbe: #F2F2F2; Textausrichtung: Mitte; Schriftgröße: 14px;}.label.selected { Hintergrundfarbe: #4180cc; Farbe: weiß;}.delete_btn { display: none; left: 50%; 50%) TranslateY(-100%); Farbe: Weiß; Polsterung: 10px 16px; 0, .7); border-radius: 1; white-space: 12px;}.delete_btn::after { content: ''; Randbreite: 5px; Randfarbe: rgba(0, 0, 0,7) transparent transparent unten: -9px; links: 50 %; transform: translatorX(-50 %);}

ps: touchstart und touchend sind nur auf mobilen Geräten nützlich. Wenn Sie Codebeispiele sehen möchten, gehen Sie bitte wie folgt vor:

  1. Verwenden Sie Chrom
  2. F12 öffnet das Zeiteinstellungsfenster
  3. Wechseln Sie zum simulierten Mobilgerät

Klicken Sie also auf das Bild unten:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.

Ähnliche Artikel