Maison > Article > interface Web > Mobile HTML5 simule un événement de suppression par appui long (avec code)

Mobile HTML5 simule un événement de suppression par appui long (avec code)

不言avant: 2018-09-30 15:27:265146parcourir

Le contenu de cet article concerne l'événement de suppression d'appui long simulé HTML5 mobile (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pourquoi j'ai écrit cet article

J'ai récemment reçu une demande pour afficher 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 :

Mobile HTML5 simule un événement de suppression par appui long (avec code)

Idée

Abandonnez le événement de clic et jugement La durée de la pression détermine s'il faut cliquer ou appuyer longuement
Utiliser les événements touchstart et touchend
pour démarrer une minuterie dans touchstart, comme Afficher un menu d'appui long après 700 ms
Effacer ce timer dans touchend, de sorte que si le temps d'appui dépasse 700 ms, le menu d'appui long sera déjà affiché, et effacement la minuterie n'aura aucun impact ; si le temps d'appui est inférieur à 700 ms, le menu d'appui long dans touchstart sera effacé avant de pouvoir être affiché.

À partir de là, nous pouvons implémenter des événements de pression longue simulés.

Téléchargez le code

Veuillez vous concentrer sur JS. Le code complet est publié ici pour que tout le monde puisse le regarder de plus près. Le code peut être copié pour voir l'effet directement
. en css La plupart d'entre eux embellissent simplement le style et masquent le bouton Supprimer au début

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 et touchend ne sont utiles que sur les appareils mobiles. Si vous souhaitez voir des exemples de code, veuillez :

Utilisez Chrome
F12 ouvre la fenêtre de réglage de l'heure
Passer à l'appareil mobile simulé

Cliquez comme indiqué ci-dessous :

Mobile HTML5 simule un événement de suppression par appui long (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css html JS 事件

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment dessiner une ellipse avec canevas ? Résumé des méthodes pour dessiner des ellipses avec canevasArticle suivant：Comment dessiner une ellipse avec canevas ? Résumé des méthodes pour dessiner des ellipses avec canevas

Articles Liés

Voir plus