Touch event

Touch operation overview

The browser's touch API consists of three parts.

-Touch: a touch point -TouchList: a collection of multiple touch points -TouchEvent: an example of an event triggered by a touch

The instance object of the Touch interface is used to represent a touch point (a finger or a touch pen), including attributes such as position, size, shape, pressure, and target element. Sometimes, a touch action consists of multiple touch points (multiple fingers), and the collection of multiple touch points is represented by an instance object of the TouchList interface. The instance object of the TouchEvent interface represents events triggered by touch, and this type of event can only be triggered by a touch screen.

Many times, touch events and mouse events are triggered at the same time, even if the mouse is not used at this time. This is to make those codes that only define mouse events but not touch events can still be used in the case of a touch screen. If you want to avoid this situation, you can use the event.preventDefault method to prevent mouse events from being emitted.

Touch interface

Touch interface overview

The Touch interface represents a single touch point. The touch point may be a finger or a touch pen.

The browser natively provides the Touch constructor, which is used to generate the Touch instance.

var touch = new Touch(touchOptions);

The Touch constructor accepts a configuration object as a parameter, which has the following properties.

-identifier: Required, the type is an integer, which represents the unique ID of the touch point. -target: Required, the type is an element node, which represents the web page element where the touch point starts. -clientX: Optional, the type is numeric, indicating the horizontal distance of the touch point relative to the upper left corner of the browser window, the default is 0. -clientY: Optional, the type is numeric, indicating the vertical distance of the touch point relative to the upper left corner of the browser window, the default is 0. -screenX: Optional, the type is numeric, which means the horizontal distance of the touch point relative to the upper left corner of the screen, the default is 0. -screenY: Optional, the type is numeric, which means the vertical distance of the touch point relative to the upper left corner of the screen, the default is 0. -pageX: Optional, the type is a numeric value, indicating the horizontal position of the touch point relative to the upper left corner of the web page (that is, including the scroll distance of the page), the default is 0. -pageY: Optional, the type is a numeric value, indicating the vertical position of the touch point relative to the upper left corner of the webpage (that is, including the scrolling distance of the page), the default is 0. -radiusX: Optional, the type is a number, which represents the X-axis radius of the affected ellipse around the touch point. The default is 0. -radiusY: Optional: the type is numeric, which represents the Y-axis radius of the affected ellipse around the touch point. The default is 0. -rotationAngle: Optional, the type is numeric, which represents the rotation angle of the ellipse of the touch area, the unit is degrees, between 0 and 90 degrees, and the default value is 0. -force: Optional, the type is numeric, and the range is from 0 to 1, indicating touch pressure. 0 means no pressure, 1 means the maximum pressure that the hardware can recognize, the default is 0.

Instance attributes of Touch interface

(1) Touch.identifier

The Touch.identifier property returns an integer that represents the unique ID of the touch point. This value remains unchanged throughout the touch process until the end of the touch event.

someElement.addEventListener(
  "touchmove",
  function (e) {
    for (var i = 0; i < e.changedTouches.length; i++) {
      console.log(e.changedTouches[i].identifier);
    }
  },
  false
);

(2) Touch.screenX, Touch.screenY, Touch.clientX, Touch.clientY, pageX, pageY

The Touch.screenX property and the Touch.screenY property respectively represent the abscissa and ordinate of the touch point relative to the upper left corner of the screen, regardless of whether the page is scrolled.

The Touch.clientX property and the Touch.clientY property respectively represent the abscissa and ordinate of the touch point relative to the upper left corner of the browser viewport, regardless of whether the page is scrolled.

The Touch.pageX property and the Touch.pageY property respectively represent the abscissa and ordinate of the touch point relative to the upper left corner of the current page, including the displacement caused by page scrolling.

(3) Touch.radiusX, Touch.radiusY, Touch.rotationAngle

The Touch.radiusX property and the Touch.radiusY property respectively return the X-axis radius and Y-axis radius of the affected ellipse around the touch point, in pixels. Multiply by 2 to get the width and height of the touch range.

The Touch.rotationAngle property represents the rotation angle of the ellipse of the touch area, in degrees, between 0 and 90 degrees.

The above three attributes together define the area where the user touches the screen, which is very helpful for describing inaccurate touches such as fingers. When the fingertip touches the screen, the touch area will form an ellipse. These three attributes are used to describe the ellipse area.

The following is an example.

div.addEventListener("touchstart", rotate);
div.addEventListener("touchmove", rotate);
div.addEventListener("touchend", rotate);

function rotate(e) {
  var touch = e.changedTouches.item(0);
  e.preventDefault();

  src.style.width = touch.radiusX * 2 + "px";
  src.style.height = touch.radiusY * 2 + "px";
  src.style.transform = "rotate(" + touch.rotationAngle + "deg)";
}

(4) Touch.force

The Touch.force property returns a value between 0 and 1, indicating the touch pressure. 0 means no pressure, 1 means the maximum pressure that the hardware can recognize.

(5) Touch.target

The Touch.target property returns an element node, which represents the element node where the touch occurred. Even if the touch point has left this node, the attribute remains unchanged.

TouchList interface

The TouchList interface represents a set of touch points. Its instance is an array-like object, and its members are instances of Touch, representing all touch points. When the user touches with three fingers, the generated TouchList instance will contain three members, and the touch point of each finger corresponds to a Touch instance object.

Its instances are mainly obtained through the properties of the touch event TouchEvent.touches, TouchEvent.changedTouches, and TouchEvent.targetTouches.

It has only two instance attributes and instance methods.

-TouchList.length: Numerical value, indicating the number of members (ie the number of touch points). -TouchList.item(): Returns the member at the specified position, and its parameter is the position number of the member (starting from zero).

TouchEvent interface

Overview

The TouchEvent interface inherits the Event interface, which represents an event instance triggered by touch, usually from a touch screen or trackpad. In addition to the inherited properties, it also has some of its own properties.

The browser natively provides the TouchEvent() constructor to generate instances of touch events.

new TouchEvent(type, options);

The constructor of TouchEvent() can accept two parameters. The first parameter is a string, indicating the type of event; the second parameter is the configuration object of the event. This parameter is optional, and all properties of the object are also optional . In addition to the configuration properties of the Event interface, the interface also has some configuration properties of its own.

-touches: An instance of TouchList, representing all the currently active touch points. The default value is an empty array []. -targetTouches: An instance of TouchList, which represents all touch points that are inside the target element node of the touch and are still active. The default value is an empty array []. -changedTouches: An instance of TouchList, which represents the touch points related to this touch event. The default value is an empty array []. -ctrlKey: Boolean value, indicating whether the Ctrl key is pressed at the same time, the default value is false. -shiftKey: Boolean value, indicating whether the Shift key is pressed at the same time, the default value is false. -altKey: Boolean value, indicating whether the Alt key is pressed at the same time, the default value is false. -metaKey: Boolean value, indicating whether the Meta key (or Windows key) is pressed at the same time, the default value is false.

Instance attributes

An instance of the TouchEvent interface has all the properties and methods of the Event instance, in addition to some of its own instance properties, all of which are read-only.

(1) TouchEvent.altKey, TouchEvent.ctrlKey, TouchEvent.shiftKey, TouchEvent.metaKey

-TouchEvent.altKey: Boolean value, indicating whether the Alt key is pressed during touch. -TouchEvent.ctrlKey: Boolean value, which indicates whether the Ctrl key is pressed during touch. -TouchEvent.shiftKey: Boolean value: indicates whether the Shift key is pressed during touch. -TouchEvent.metaKey: Boolean value, indicating whether the Meta key (or Windows key) was pressed during touch.

The following is an example.

someElement.addEventListener(
  "touchstart",
  function (e) {
    console.log("altKey = " + e.altKey);
    console.log("ctrlKey = " + e.ctrlKey);
    console.log("metaKey = " + e.metaKey);
    console.log("shiftKey = " + e.shiftKey);
  },
  false
);

(2) TouchEvent.changedTouches

The TouchEvent.changedTouches property returns a TouchList instance. The members are a group of Touch instance objects, which represent the touch points related to this touch event.

For different times, the meaning of this attribute is different.

-touchstart event: activated touch point -touchmove event: the touch point that has changed -touchend event: the touch point that disappeared (ie the point that is no longer touched)

The following is an example.

someElement.addEventListener(
  "touchmove",
  function (e) {
    for (var i = 0; i < e.changedTouches.length; i++) {
      console.log(e.changedTouches[i].identifier);
    }
  },
  false
);

(3) TouchEvent.touches

The TouchEvent.touches property returns a TouchList instance, the members are all touch points that are still active (that is, touching). Generally speaking, a finger is a touch point.

The following is an example.

someElement.addEventListener(
  "touchstart",
  function (e) {
    switch (e.touches.length) {
      // One finger touch
      case 1:
        handle_one_touch(e);
        break;
      // Two fingers touch
      case 2:
        handle_two_touches(e);
        break;
      // Three fingers touch
      case 3:
        handle_three_touches(e);
        break;
      // Other situations
      default:
        console.log("Not supported");
        break;
    }
  },
  false
);

(4) TouchEvent.targetTouches

The TouchEvent.targetTouches property returns a TouchList instance. The members are all touch points inside the target element node of the touch event that are still active (that is, touching).

function touches_in_target(ev) {
  return ev.touches.length === ev.targetTouches.length ? true : false;
}

The above code is used to determine whether all touch points are in the target element.

Types of touch events

There are the following types of events triggered by touch. You can use the TouchEvent.type property to check which type of event happened.

-touchstart: Triggered when the user starts touching, and its target property returns the element node where the touch occurred. -touchend: Triggered when the user no longer touches the touch screen (or moves out of the edge of the screen), its target attribute is consistent with the touchstart event, which is the element node where the touch starts. Its changedTouches property returns a TouchList instance, which contains all touch points that are no longer touched (ie, the Touch instance object). -touchmove: Triggered when the user moves the touch point, and its target property is consistent with the touchstart event. If the radius, angle, and strength of the touch change, the event will also be triggered. -touchcancel: Triggered when the touch point is canceled, such as a modal window pops up in the touch area, the touch point leaves the document area (to enter the browser menu bar), the user touches too many points, which exceeds the supported Upper limit (automatically cancel the previous touch point).

Below is an example.

var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);

function handleStart(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    console.log(touches[i].pageX, touches[i].pageY);
  }
}

function handleMove(evt) {
  evt.preventDefault();
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    var touch = touches[i];
    console.log(touch.pageX, touch.pageY);
  }
}