Главная страница>Учебник по веб-дизайну>Учебник по HTML

Метод реализации имитации события длительного нажатия в HTML5 на мобильном терминале

Автор：Eve Cole Время обновления：2025-01-18 17:24:01

Зачем писать эту статью

Недавно я получил запрос на отображение и удаление плавающей кнопки удаления при длительном нажатии определенной метки. Это требование на самом деле очень распространено в приложениях, но в мобильном h5 у нас нет события длительного нажатия, поэтому нам нужно смоделировать это событие самостоятельно.

Примерный эффект следующий:

ps: Чтобы сделать гифку, я скачал приложение и пришлось отправить его на компьютер по электронной почте. У меня болит голова. .

Идеи

  • Откажитесь от события щелчка и решите, следует ли щелкать или долго нажимать, оценивая продолжительность нажатия.
  • Использование событий touchstart и touchend
  • Запуск таймера в Touchstart, например отображение меню при длительном нажатии через 700 мс.
  • Очистите этот таймер в Touchend, чтобы, если время нажатия превышает 700 мс, отображалось меню длительного нажатия, а очистка таймера не будет иметь никакого эффекта, если время нажатия меньше 700 мс, тогда меню длительного нажатия в Touchstart; Оно было очищено до того, как его можно было отобразить.

Благодаря этому мы можем реализовать имитацию событий длительного нажатия.

Код активации

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

Большая часть CSS предназначена только для украшения стиля и изначально скрывает кнопку удаления.

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>Длительное нажатие</div> <div class=delete_btn>Удалить</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() таймер = setTimeout(function () { deleteBtn.style.display = 'block' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() ClearTimeout(timer) if (endTime - startTime < 700) { // Обработка событий щелчка label.classList.add('selected' ) }})

CSS 

 .container {позиция: относительная; дисплей: встроенный блок; маржа-верх: 50 пикселей;}.label { дисплей: встроенный блок; размер поля: ширина: 105 пикселей; высота: 32 пикселя; ; цвет фона: #F2F2F2; цвет: #5F5F5F; выравнивание текста: радиус границы: 3 пикселя; размер шрифта: 14 пикселей;}.label.selected { цвет фона: #4180cc; цвет: белый;}.delete_btn { display: none; top: -8px; left: 50%; 50%) TranslateY(-100%); цвет: белый; отступ: 10px 16px; цвет фона: rgba(0, 0, 0, .7); граница-радиус: 6 пикселей; высота строки: 1; размер шрифта: 12 пикселей;}.delete_btn:: after {content: ''; высота: 0; ширина границы: 5 пикселей; стиль границы: сплошной; цвет границы: rgba (0, 0, 0, .7) прозрачный прозрачный прозрачный; -9 пикселей; влево: 50%; преобразование: TranslateX(-50%);}

PS: Touchstart и Touchend полезны только на мобильных устройствах. Если вы хотите увидеть примеры кода, пожалуйста:

  1. использовать хром
  2. F12 открывает окно настройки времени
  3. Переключиться на симулированное мобильное устройство

То есть нажмите на картинку ниже:

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.

Связанные статьи