Событие касания HTML5 реализует простой индикатор выполнения на мобильных устройствах.

внешний интерфейс JavaScript HTML

предисловие

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

представлять

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

  • touchstart: срабатывает, когда палец касается экрана, даже если палец уже находится на экране.
  • touchmove: срабатывает постоянно, когда палец скользит по экрану. Вызов события preventDefault() во время этого события предотвращает прокрутку.
  • touchend: срабатывает, когда палец убирается с экрана.

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

  • touches: Массив сенсорных объектов, представляющих текущую отслеживаемую сенсорную операцию.
  • targetTouches: Массив объектов Touch, относящихся к цели события.
  • changeTouches: Массив объектов Touch, представляющих, что изменилось с момента последнего касания.

Свойства, содержащиеся в каждом сенсорном объекте, следующие:

  • clientX: X-координата сенсорной цели в окне просмотра.
  • clientY: Координата Y сенсорной цели в окне просмотра.
  • pageX: координата x сенсорной цели на странице.
  • pageY: Координата Y сенсорного экрана на странице.
  • screenX:screenX: X-координата точки касания на экране.
  • screenY:screenX: X-координата точки касания на экране.
  • identifier: Уникальный идентификатор, идентифицирующий касание.
  • 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.offsetWidth

let touchPoint = 0
let 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	//	通过当前位置与初始位置之差计算改变的距离
    let btnLeftStyle = btnLeft + diffX	//	为按钮定义新的left值

    touch.target.style.left = btnLeftStyle + 'px'

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%'	//	通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
})

Посредством ряда логических операций наш индикатор выполнения в основном был реализован, но была обнаружена проблема.Когда положение касания выходит за пределы контейнера индикатора выполнения, возникает ошибка.Давайте сделаем некоторые ограничения.

if (btnLeftStyle > progressWrapperWidth) {
    btnLeftStyle = progressWrapperWidth
    } else if (btnLeftStyle < 0) {
    btnLeftStyle = 0
}

До сих пор была реализована простая мобильная полоса прокрутки.

Категории