Using Pointer Events

在此页

Definitions
范例
规范
浏览器兼容性
另请参阅
相关话题

This guide demonstrates how to use pointer events and the HTML <canvas> element to build a multi-touch enabled drawing application. This example is based on the one in the touch events overview , except it uses the pointer events input event model. Another difference is that because pointer events are pointer device agnostic, the application accepts coordinate-based inputs from a mouse, a pen, or a fingertip using the same code.

This application will only work on a browser that supports pointer events.

A live version of this application is available on GitHub 。 source code is available on Github and pull requests and bug reports are welcome.

Definitions

Surface

Touch point

范例

The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus, mouse, or other method of pointing at a location.

Create a canvas

touch-action property is set to none to prevent the browser from applying its default touch behavior to the application.

<canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none">
  Your browser does not support canvas element.
</canvas>
<br>
<button onclick="startup()">Initialize</button>
<br>
Log: <pre id="log" style="border: 1px solid #ccc;"></pre>

Setting up the event handlers

When the page loads, the startup() function shown below should be called by our <body> 元素的 onload attribute (but in the example we use a button to trigger it, due to limitations of the MDN live example system).

function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("pointerdown", handleStart, false);
  el.addEventListener("pointerup", handleEnd, false);
  el.addEventListener("pointercancel", handleCancel, false);
  el.addEventListener("pointermove", handleMove, false);
  log("initialized.");
}

This simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.

Tracking new touches

We'll keep track of the touches in-progress.

var ongoingTouches = new Array();

当 pointerdown event occurs, indicating that a new touch on the surface has occurred, the handleStart() function below is called.

function handleStart(evt) {
  log("pointerdown.");
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  log("pointerdown: id = " + evt.pointerId);
  ongoingTouches.push(copyTouch(evt));
  var color = colorForTouch(evt);
  ctx.beginPath();
  ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
  ctx.arc(evt.clientX, evt.clientY, 4, 0, 2 * Math.PI, false);  // a circle at the start
  ctx.fillStyle = color;
  ctx.fill();
}

After storing some of the event's processing in the ongoingTouches for later processing, the start point is drawn as a small circle. We're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.

Drawing as the pointers move

Each time one or more pointers moves, a pointermove 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) {
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var color = colorForTouch(evt);
  var idx = ongoingTouchIndexById(evt.pointerId);
  log("continuing touch: idx =  " + idx);
  if (idx >= 0) {
    ctx.beginPath();
    log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
    log("ctx.lineTo(" + evt.clientX + ", " + evt.clientY + ");");
    ctx.lineTo(evt.clientX, evt.clientY);
    ctx.lineWidth = 4;
    ctx.strokeStyle = color;
    ctx.stroke();
    ongoingTouches.splice(idx, 1, copyTouch(evt));  // swap in the new touch record
    log(".");
  } else {
    log("can't figure out which touch to continue: idx = " + idx);
  }
}

This function 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 PointerEvent.pointerId property. This property is a unique integer for each pointer event, 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 touch point with the current information in the ongoingTouches 数组。

Handling the end of a touch

When the user lifts a finger off the surface, a pointerup event is sent. We handle this event by calling the handleEnd() function below. Its job is to draw the last line segment for the touch that ended and remove the touch point from the ongoing touch list.

function handleEnd(evt) {
  log("pointerup");
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var color = colorForTouch(evt);
  var idx = ongoingTouchIndexById(evt.pointerId);
  if (idx >= 0) {
    ctx.lineWidth = 4;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
    ctx.lineTo(evt.clientX, evt.clientY);
    ctx.fillRect(evt.clientX - 4, evt.clientY - 4, 8, 8);  // and a square at the end
    ongoingTouches.splice(idx, 1);  // remove it; we're done
  } else {
    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 touch point.

Handling canceled touches

If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the pointercancel event is sent, and we call the handleCancel() function below.

function handleCancel(evt) {
  log("pointercancel: id = " + evt.pointerId);
  var idx = ongoingTouchIndexById(evt.pointerId);
  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.

Selecting a color for each touch

In order 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.pointerId % 16;
  var g = Math.floor(touch.pointerId / 3) % 16;
  var b = Math.floor(touch.pointerId / 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;
  log("color for touch with identifier " + touch.pointerId + " = " + 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 PointerEvent.pointerId value of 10, the resulting string is "#aaa".

Copying a touch object

Some browsers may re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.

function copyTouch(touch) {
  return { identifier: touch.pointerId, pageX: touch.clientX, pageY: touch.clientY };
}

Finding an ongoing touch

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
}

Showing what's going on

function log(msg) {
  var p = document.getElementById('log');
  p.innerHTML = msg + "\n" + p.innerHTML;
}

规范

规范	状态	注释
指针事件 – 2 级 The definition of 'PointerEvent' in that specification.	推荐	非稳定版本。
指针事件 The definition of 'PointerEvent' in that specification.	过时	初始定义。

浏览器兼容性

`PointerEvent` interface

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	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`PointerEvent`	Chrome 55	Edge 12	Firefox 59 59 Disabled ). To change preferences in Firefox, visit	IE 11 11 部分支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: MS 见 MSDN Pointer events updates .	Opera 42	Safari 13	WebView Android 55	Chrome Android 55	Firefox Android 41	Opera Android 42	Safari iOS 13	Samsung Internet Android 6.0

在此页

Definitions

范例

Create a canvas

Setting up the event handlers

Tracking new touches

Drawing as the pointers move

Handling the end of a touch

Handling canceled touches

方便函数

Selecting a color for each touch

Copying a touch object

Finding an ongoing touch

Showing what's going on

规范

浏览器兼容性

`PointerEvent` interface

图例

另请参阅

元数据

相关话题

在此页

Definitions

范例

Create a canvas

Setting up the event handlers

Tracking new touches

Drawing as the pointers move

Handling the end of a touch

Handling canceled touches

方便函数

Selecting a color for each touch

Copying a touch object

Finding an ongoing touch

Showing what's going on

规范

浏览器兼容性

PointerEvent interface

图例

另请参阅

相关话题

`PointerEvent` interface