To provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.
The touch events interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture. A multi-touch interaction starts when a finger (or stylus) first touches the contact surface. Other fingers may subsequently touch the surface and optionally move across the touch surface. The interaction ends when the fingers are removed from the surface. During this interaction, an application receives touch events during the start, move, and end phases.
Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface. The
TouchEvent
interface encapsulates all of the touchpoints that are currently active. The
触摸
interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport.
The touch-sensitive surface. This may be a screen or trackpad.
A point of contact with the surface. This may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus.
TouchEvent
Represents an event that occurs when the state of touches on the surface changes.
触摸
Represents a single point of contact between the user and the touch surface.
TouchList
Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.
This example tracks multiple touchpoints at a time, allowing the user to draw in a
<canvas>
with more than one finger at a time. It will only work on a browser that supports touch events.
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> Your browser does not support canvas element. </canvas> <br> Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
When the page loads, the
startup()
function shown below will be called.
function startup() {
var el = document.getElementById("canvas");
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);
}
document.addEventListener("DOMContentLoaded", startup);
This simply sets up all the event listeners for our
<canvas>
element so we can handle the touch events as they occur.
We'll keep track of the touches in-progress.
var ongoingTouches = [];
当
touchstart
event occurs, indicating that a new touch on the surface has occurred, the
handleStart()
function below is called.
function handleStart(evt) {
evt.preventDefault();
console.log("touchstart.");
var el = document.getElementById("canvas");
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
console.log("touchstart:" + i + "...");
ongoingTouches.push(copyTouch(touches[i]));
var color = colorForTouch(touches[i]);
ctx.beginPath();
ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start
ctx.fillStyle = color;
ctx.fill();
console.log("touchstart:" + i + ".");
}
}
This calls
event.preventDefault()
to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's
TouchEvent.changedTouches
特性。
After that, we iterate over all the
触摸
objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly.
Each time one or more fingers move, a
touchmove
event is delivered, resulting in our
handleMove()
function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.
function handleMove(evt) {
evt.preventDefault();
var el = document.getElementById("canvas");
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
var color = colorForTouch(touches[i]);
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
console.log("continuing touch "+idx);
ctx.beginPath();
console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.lineWidth = 4;
ctx.strokeStyle = color;
ctx.stroke();
ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
console.log(".");
} else {
console.log("can't figure out which touch to continue");
}
}
}
This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's
Touch.identifier
property. This property is a unique integer for each touch and remains consistent for each event during the duration of each finger's contact with the surface.
This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.
After drawing the line, we call
Array.splice()
to replace the previous information about the touchpoint with the current information in the
ongoingTouches
数组。
When the user lifts a finger off the surface, a
touchend
event is sent. We handle this by calling the
handleEnd()
function below. Its job is to draw the last line segment for each touch that ended and remove the touchpoint from the ongoing touch list.
function handleEnd(evt) {
evt.preventDefault();
log("touchend");
var el = document.getElementById("canvas");
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
var color = colorForTouch(touches[i]);
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
ctx.lineWidth = 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end
ongoingTouches.splice(idx, 1); // remove it; we're done
} else {
console.log("can't figure out which touch to end");
}
}
}
This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call
Array.splice()
, we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touchpoint.
If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the
touchcancel
event is sent, and we call the
handleCancel()
function below.
function handleCancel(evt) {
evt.preventDefault();
console.log("touchcancel.");
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
var idx = ongoingTouchIndexById(touches[i].identifier);
ongoingTouches.splice(idx, 1); // remove it; we're done
}
}
Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.
This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.
To make each touch's drawing look different, the
colorForTouch()
function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.
function colorForTouch(touch) {
var r = touch.identifier % 16;
var g = Math.floor(touch.identifier / 3) % 16;
var b = Math.floor(touch.identifier / 7) % 16;
r = r.toString(16); // make it a hex digit
g = g.toString(16); // make it a hex digit
b = b.toString(16); // make it a hex digit
var color = "#" + r + g + b;
console.log("color for touch with identifier " + touch.identifier + " = " + color);
return color;
}
The result from this function is a string that can be used when calling
<canvas>
functions to set drawing colors. For example, for a
Touch.identifier
value of 10, the resulting string is "#a31".
Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the properties you care about, rather than referencing the entire object.
function copyTouch({ identifier, pageX, pageY }) {
return { identifier, pageX, pageY };
}
ongoingTouchIndexById()
function below scans through the
ongoingTouches
array to find the touch matching the given identifier then returns that touch's index into the array.
function ongoingTouchIndexById(idToFind) {
for (var i = 0; i < ongoingTouches.length; i++) {
var id = ongoingTouches[i].identifier;
if (id == idToFind) {
return i;
}
}
return -1; // not found
}
function log(msg) {
var p = document.getElementById('log');
p.innerHTML = msg + "\n" + p.innerHTML;
}
If your browser supports it, you can see it live .
This section provides additional tips on how to handle touch events in your web application.
Since calling
preventDefault()
在
touchstart
or the first
touchmove
event of a series prevents the corresponding mouse events from firing, it's common to call
preventDefault()
on
touchmove
而不是
touchstart
. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)
function onTouch(evt) {
evt.preventDefault();
if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
return;
var newEvt = document.createEvent("MouseEvents");
var type = null;
var touch = null;
switch (evt.type) {
case "touchstart":
type = "mousedown";
touch = evt.changedTouches[0];
break;
case "touchmove":
type = "mousemove";
touch = evt.changedTouches[0];
break;
case "touchend":
type = "mouseup";
touch = evt.changedTouches[0];
break;
}
newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
touch.screenX, touch.screenY, touch.clientX, touch.clientY,
evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
evt.originalTarget.dispatchEvent(newEvt);
}
One technique for preventing things like
pinchZoom
on a page is to call
preventDefault()
on the second touch in a series. This behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Touch Events – Level 2
The definition of 'Touch' in that specification. |
草案 |
添加
radiusX
,
radiusY
,
rotationAngle
,
force
properties
|
|
触摸事件
The definition of 'Touch' in that specification. |
推荐 | 初始定义。 |
Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens.
The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device. If the touch events API is available, these websites will assume a mobile device and serve mobile-optimized content. This may then provide a poor experience for users of desktop devices that have touch screens.
To support both touch and mouse across all types of devices, use pointer events 代替。
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
触摸
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
Touch()
构造函数
|
Chrome 48 | Edge 79 | Firefox 46 | IE No | Opera 35 | Safari No | WebView Android 48 | Chrome Android 48 | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 5.0 |
clientX
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
clientY
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
force
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
标识符
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
pageX
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
pageY
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
radiusX
|
Chrome 43 | Edge ≤79 | Firefox ? | IE No | Opera Yes | Safari No | WebView Android 43 | Chrome Android 43 | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 4.0 |
radiusY
|
Chrome 43 | Edge ≤79 | Firefox ? | IE No | Opera Yes | Safari No | WebView Android 43 | Chrome Android 43 | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 4.0 |
rotationAngle
|
Chrome 43 | Edge ≤79 | Firefox ? | IE No | Opera Yes | Safari No | WebView Android 43 | Chrome Android 43 | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 4.0 |
screenX
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
screenY
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
target
|
Chrome 22 | Edge ≤18 |
Firefox
52
|
IE No | Opera Yes | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 6 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
见实现注意事项。
In Firefox, touch events are disabled when e10s (electrolysis; multiprocess Firefox ) is disabled. e10s is on by default in Firefox but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.
You can test whether e10s is disabled by going to
about:support
and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.
If you want to force e10s to be on — to explicitly re-enable touch events support — you need to go to
about:config
and create a new Boolean preference
browser.tabs.remote.force-enable
. Set it to
true
, restart the browser, and e10s will be enabled regardless of any other settings.