В HTML было добавлено много новых событий, но из-за проблем совместимости многие события не используются широко. Далее мы представим некоторые полезные события мобильного касания: touchstart, touchmove, touchend.
представлятьКратко представим эти события:
Эти события касания имеют общие свойства dom. Кроме того, они содержат три свойства для отслеживания касаний:
Каждый сенсорный объект содержит следующие свойства:
Теперь, когда вы понимаете характеристики событий прикосновения, давайте начнем увлекательное практическое занятие.
Настоящий бойДавайте воспользуемся событиями касания, чтобы реализовать скользящий индикатор выполнения на мобильной стороне.
Давайте сначала разложим HTML
<div class=progress-wrapper> <div class=progress></div> <div class=progress-btn></div></div>
Часть CSS здесь опущена
Получите элемент dom и инициализируйте начальную точку касания и расстояние между кнопкой и самой левой частью контейнера.
const ProgressWrapper = document.querySelector('.progress-wrapper')const Progress = document.querySelector('.progress')const ProgressBtn = document.querySelector('.progress-btn')const ProgressWrapperWidth = ProgressWrapper.offsetWidthlet TouchPoint = 0let btnLeft = 0Прослушивание события Touchstart
ProgressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // Получаем начальную позицию касания btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // Здесь игнорируем совместимость браузера IE})Слушайте события touchmove
ProgressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // Вычисляем измененное расстояние по разнице между текущей позицией и начальной Position let btnLeftStyle = btnLeft + diffX // Определяем новое левое значение для кнопки touch.target.style.left = btnLeftStyle + 'px' Progress.style.width = (btnLeftStyle / ProgressWrapperWidth) * 100 + '%' // Вычисляем процент длины индикатора выполнения через отношение левого значения кнопки к длине контейнера индикатора выполнения})Посредством серии логических операций наш индикатор выполнения был в основном реализован, но была обнаружена проблема, когда позиция касания выходит за пределы контейнера индикатора выполнения, возникает ошибка. Давайте внесем некоторые ограничения.
if (btnLeftStyle > ProgressWrapperWidth) { btnLeftStyle = ProgressWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}На данный момент реализована простая мобильная полоса прокрутки.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.