suchen

Heim  >  Artikel  >  Web-Frontend  >  Mobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code)

Mobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code)

不言
不言nach vorne
2018-09-30 15:27:265211Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem simulierten HTML5-Löschereignis (mit Code). Ich hoffe, dass es für Sie hilfreich ist.

Warum ich diesen Artikel geschrieben habe

Ich habe kürzlich eine Anfrage erhalten, lange auf eine bestimmte Beschriftung zu drücken, um eine schwebende Schaltfläche zum Löschen anzuzeigen. 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:

Mobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code)

Idee

  • Gib das auf Klicken Sie auf ein Ereignis und fällen Sie ein Urteil. Die Dauer des Drückens bestimmt, ob geklickt oder lange gedrückt wird.

  • Verwenden Sie Touchstart- und Touchend-Ereignisse

  • , um einen Timer zu starten in Touchstart, zum Beispiel in Nach 700 ms wird ein Menü für langes Drücken angezeigt

  • Löschen Sie diesen Timer in Touchend, sodass das Menü für langes Drücken bereits angezeigt wird, wenn die Druckzeit 700 ms überschreitet angezeigt werden, und das Löschen des Timers hat keine Auswirkungen; wenn die Presszeit weniger als 700 ms beträgt, wird das Menü für langes Drücken in Touchstart gelöscht, bevor es angezeigt werden kann.

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

Laden Sie den Code hoch

Bitte konzentrieren Sie sich auf JS. Der vollständige Code wird hier veröffentlicht, damit jeder ihn genauer betrachten kann. Der Code kann kopiert werden, um den Effekt direkt zu sehen in CSS Die meisten von ihnen verschönern nur den Stil und verbergen die Schaltfläche „Löschen“ am Anfang

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./longpress.css" />
</head>
<body>
    <div>
        <div id="label">长按我</div>
        <div>删除</div>
    </div>
    <script src="./longpress.js"></script>
</body>
</html>

JS

let timer = null
let startTime = &#39;&#39;
let endTime = &#39;&#39;
const label = document.querySelector(&#39;.label&#39;)
const deleteBtn = document.querySelector(&#39;.delete_btn&#39;)

label.addEventListener(&#39;touchstart&#39;, function () {
  startTime = +new Date()
  timer = setTimeout(function () {
    deleteBtn.style.display = &#39;block&#39;
  }, 700)
})

label.addEventListener(&#39;touchend&#39;, function () {
  endTime = +new Date()
  clearTimeout(timer)
  if (endTime - startTime < 700) {
    // 处理点击事件
    label.classList.add(&#39;selected&#39;)
  }
})

CSS

.container {
    position: relative;
    display: inline-block;
    margin-top: 50px;
}

.label {
    display: inline-block;
    box-sizing: border-box;
    width: 105px;
    height: 32px;
    line-height: 32px;
    background-color: #F2F2F2;
    color: #5F5F5F;
    text-align: center;
    border-radius: 3px;
    font-size: 14px;
}

.label.selected {
    background-color: #4180cc;
    color: white;
}

.delete_btn {
    display: none;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    color: white;
    padding: 10px 16px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 6px;
    line-height: 1;
    white-space: nowrap;
    font-size: 12px;
}

.delete_btn::after {
    content: &#39;&#39;;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .7) transparent transparent transparent;
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
}

ps: touchstart und touchend sind nur auf mobilen Geräten sinnvoll:

  • Verwenden Sie Chrome

  • F12 Öffnen Sie das Zeitanpassungsfenster

  • Wechseln Sie zum simulierten Mobilgerät

Klicken Sie auf das Bild unten:

Mobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code)

Das obige ist der detaillierte Inhalt vonMobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css html JS 事件
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit LeinwandNächster Artikel：Wie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit Leinwand

In Verbindung stehende Artikel

Mehr sehen