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

В HTML было добавлено много новых событий, но из-за проблем совместимости многие события не используются широко. Далее мы представим некоторые полезные события мобильного касания: touchstart, touchmove, touchend.

Кратко представим эти события:

1. Touchstart: срабатывает, когда палец касается экрана, даже если палец уже находится на экране.
2. touchmove: срабатывает постоянно, когда палец скользит по экрану. Во время этого события вызов события PreventDefault() может предотвратить прокрутку.
3. touchend: срабатывает, когда палец покидает экран.

Эти события касания имеют общие свойства dom. Кроме того, они содержат три свойства для отслеживания касаний:

1. касания: массив сенсорных объектов, представляющих отслеживаемые в данный момент сенсорные операции.
2. targetTouches: массив объектов Touch, специфичных для целей событий.
3. ChangeTouches: массив объектов Touch, который представляет то, что изменилось с момента последнего касания.

Каждый сенсорный объект содержит следующие свойства:

1. clientX: координата x цели касания в области просмотра.
2. clientY: координата Y сенсорной цели в области просмотра.
3. pageX: координата X сенсорной цели на странице.
4. pageY: координата Y сенсорной цели на странице.
5. screenX: screenX: координата X сенсорной цели на экране.
6. screenY: screenX: координата x сенсорной цели на экране.
7. идентификатор: уникальный идентификатор, идентифицирующий касание.
8. target: screenX: координата x сенсорной цели на экране.

Теперь, когда вы понимаете характеристики событий прикосновения, давайте начнем увлекательное практическое занятие.

Давайте воспользуемся событиями касания, чтобы реализовать скользящий индикатор выполнения на мобильной стороне.

Давайте сначала разложим 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.