With the popularity of smart phones, there are more and more mobile web pages and web version of the game, mobile phone touch, mobile, rotation and so on, a variety of operations. While computers typically interact with humans using a mouse, cell phones use touch. The difference are:

  • A PC can only have one mouse, while mobile has multi-touch.
  • Mouseup, MouseDown and Mousemove are used on PC, while TouchStart, TouchMove and TouchEnd are used on mobile.

Touch event type

  • Touchstart – A finger touches the screen and is triggered when pressed on an element
  • Touchmove – Move your finger around the screen after pressing on an element
  • Tounchend – Triggered when the screen is lifted anywhere after the finger is pressed on the element
  • Touchcancel – Triggered when a touch is cancelled by the system (rarely used)

Touch events differ from Mouse events:

  • “Touchstart” : finger down, “mousedown” : mousedown.
  • Touchmove: moving a finger on the screen, mousemove: moving a mouse on a Web page.
  • Touchend: finger up, mouseup: mouseup.
  • Touch: events can only be used on the mobile terminal, mouse: events can only be used on the PC terminal.
  • Touchstart: Can only be triggered by pressing inside the binding element. Touchmove and TouchEnd can be executed anywhere on the screen. Mousedown, Mousemove, and mouseup can only be executed inside the binding element.
  • Touchmove and TouchEnd can be executed only after touchStart is triggered. But Mousemove can execute without pressing the mouse over the binding element.

1.1. Event binding

Use grammar:

element.addEventListener( 'eventtype' , function(){} , useCapture )
Copy the code

Eg: Using the touchstart example:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> <style>. Box {width:200px; height:200px; border:solid 1px red; } </style> </head> <body> <div class="box"></div> <script> window.onload = function(){ let oBox = document.getElementsByClassName('box')[0] oBox.addEventListener('touchstart',function(ev){ console.log(ev) },false) } </script> </body> </html>Copy the code

The Event object for each touch event provides common attributes during finger touch. Print the event object returned by the function and find that it has many parameters, as shown in the figure below:

1.2. TouchEvent object properties

  • TargetTouches – Touch list on the current element target.
  • Touches – List of finger touches on the current screen.
  • ChangedTouches – Touches the list of touches that trigger the current event.

Obtaining method:

let oBox = document.getElementsByClassName('box')[0]
oBox.addEventListener('touchstart',function(ev){
 console.log(ev.touches)
 console.log(ev.targetTouches)
 console.log(ev.changedTouches)
 },false)
Copy the code

In the last article, we introduced how to access the local web page on the computer by mobile phone. It is suggested to use Browsersync, run the web page by mobile phone, touch the screen by mobile phone, touch on the element and observe the printing of the above three attributes.

We find that they are all arrays, with each element representing a touch point. Each touch point has some important attributes, which are as follows:

  • ClientX – The x coordinates of the touch point in the viewable area.
  • ClientY – The y coordinate of the touch point in the viewable area.
  • PageX – The x coordinate of the touch point on the web page.
  • PageY – The y coordinate of the touch point on the web page.
  • ScreenX – The x coordinate of the touch point on the screen.
  • ScreenY – The y coordinate of the touch point on the screen.
  • Identifier – The unique identification ID of the touch point.
  • Target-touched DOM node.

Two, touch classification

In many cases, touch events fall into two categories, single point trigger and multi-point trigger.

Single point trigger, refers to a finger on the screen touch, slide, main application drop down refresh, mobile phone banner sliding switch, etc.

Note: If it is a single touch, but more than one finger triggers at the same time, the average of the three points is required as the touch point.

Multi-point trigger: Multiple fingers touch the screen at the same time to rotate, zoom in, enlarge, and drag.

In many cases, both the touch and mouse events are triggered at the same time, so that no touch device can use the mouse when running on the PC. If touch events are supported, use event.preventDefault() to prevent the mouse event from happening and the mouse event will be invalidated. If both mouse and touch events are supported, and if multiple touch events are added, what is the order of execution?

Trigger sequence of touch event and mouse event:

Touchstart > toucheend > mousemove > mousedown > mouseup > click