HTML has added many new events, but due to compatibility problems, many events are not widely used, next to introduce some useful mobile touch events: TouchStart, TouchMove, touchEnd.


Let’s take a brief look at these events:

  • Touchstart: Triggered when a finger touches the screen, even if a finger is already on the screen.
  • Touchmove: Triggered continuously when a finger is swiped across the screen. Call the preventDefault() event to prevent scrolling during this event.
  • Touchend: Triggered when the finger moves away from the screen.

These touch events have common DOM attributes. In addition, they contain three attributes for tracking touches:

  • Touches: An array of touch objects representing the touch operations currently being traced.
  • TargetTouches: An array of Touch objects specific to the event target.
  • ChangeTouches: An array of Touch objects that represent what has changed since the last Touch.

Each Touch object contains the following properties:

  • ClientX: Touch the x coordinate of the target in the viewport.
  • ClientY: Touch the target’s y coordinate in the viewport.
  • PageX: Touch the x coordinate of the target in the page.
  • PageY: Touch the y coordinate of the target on the page.
  • ScreenX: screenX: touches the x coordinate of the target in the screen.
  • ScreenY: screenX: touches the x coordinate of the target in the screen.
  • Identifier: Unique ID that identifies a touch.
  • Target: screenX: touches the x coordinate of the target on the screen.

Knowing the characteristics of touch events, let’s start the actual tense stimulation

In actual combat

Let’s implement a mobile slideable progress bar by using touch events

Let’s start with the HTML layout

<div class="progress-wrapper">
    <div class="progress"></div>
    <div class="progress-btn"></div>
Copy the code

The CSS part is omitted here

Gets the DOM element and initializes the distance from the touch start and button to the leftmost side of the container

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
Copy the code

Listen for the TouchStart event

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX	// Get the initial position of the touch
	btnLeft = parseInt(getComputedStyle(progressBtn, null) ['left'].10)	// Internet Explorer compatibility is ignored here
Copy the code

Listen for the TouchMove event

progressBtn.addEventListener('touchmove', e => {
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint	// Calculate the change of distance by the difference between the current position and the initial position
    let btnLeftStyle = btnLeft + diffX	// Define a new left value for the button = btnLeftStyle + 'px' = (btnLeftStyle / progressWrapperWidth) * 100 + The '%'	// The ratio of the left value of the button to the length of the progress bar container is used to calculate the percentage of the progress bar length
Copy the code

Through a series of logical operations, our progress bar has been basically realized, but we found a problem, when the touch location is beyond the progress bar container, there will be a bug, we will make some restrictions

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

At this point, a simple mobile scrollbar is implemented