Pourquoi écrire cet article
J'ai récemment reçu une demande d'affichage et de suppression d'un bouton de suppression flottant en appuyant longuement sur une certaine étiquette. Cette exigence est en fait très courante sur les applications, mais dans le mobile h5, nous n'avons pas d'événement de presse long, nous devons donc simuler cet événement nous-mêmes.
L'effet approximatif est le suivant :
ps : Pour créer un gif, j'ai téléchargé l'application et j'ai dû l'envoyer à l'ordinateur par e-mail. J'ai mal à la tête. .
IdéesÀ partir de là, nous pouvons implémenter des événements de pression longue simulés.
Code de montée 请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
La plupart des CSS servent simplement à embellir le style et à masquer initialement le bouton de suppression.
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 -Compatible content=ie=edge> <title>Document</title> <link rel=stylesheet type=text/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>Appuyez longuement sur moi</div> <div class=delete_btn>Supprimer</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) { // Gérer les événements de clic label.classList.add('selected' ) }})CSS
.container { position : relative ; affichage : bloc-en-ligne ; marge-haut : 50 px ;}.label { affichage : bloc-en-ligne ; largeur de la boîte : 105 px hauteur : 32 px ; ; couleur d'arrière-plan : #F2F2F2 ; couleur : #5F5F5F ; alignement du texte : centre ; taille de police : 14 px ;}.label.selected { couleur d'arrière-plan : #4180cc ; couleur : blanc ;}.delete_btn { affichage : aucun ; position : haut : -8 px gauche : 50 % ; 50%) traduireY(-100%); couleur : blanc ; remplissage : 10px 16px ; 0, .7); rayon de bordure : 6 px ; hauteur de ligne : 1 ; espace blanc : nowrap ; taille de police : 12 px; largeur de la bordure : 5 px ; style de la bordure : solide ; couleur de la bordure : rgba (0, 0, 0, .7) transparent transparent position : absolue ; -9px à gauche : 50 % ; transformation : traduireX(-50 %);}ps : touchstart et touchend ne sont utiles que sur les appareils mobiles. Si vous souhaitez voir des exemples de code, veuillez :
Autrement dit, cliquez sur l'image ci-dessous :
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.