统一触摸和鼠标：指针事件将如何轻松实现跨浏览器触摸支持

David Rousset

5.00/5 (1投票)

2015年10月19日

CPOL

19分钟阅读

11353

在这篇文章中，我想向您展示一些使用 Pointers（一项新兴的多点触控技术）和 polyfills 的浏览器实验，它们使跨浏览器支持变得不那么复杂。

我经常收到开发人员提出的问题，例如：“有了这么多支持触控的手机和平板设备，我该从何开始？”以及“为触控输入开发最简单的方法是什么？”简短的回答是：“这很复杂。”当然，在现代支持触控的浏览器中，或者作为旧浏览器的回退方案，有一种更统一的方式来处理网络上的多点触控输入。在这篇文章中，我想向您展示一些使用 Pointers（一项新兴的多点触控技术）和 polyfills 的浏览器实验，它们使跨浏览器支持变得不那么复杂。这种代码您也可以进行实验，并轻松地在您自己的网站上使用。

首先，网络上许多触控技术正在不断发展——为了支持各种浏览器，除了 MSPointers，您还需要研究 iOS 触控事件模型和 W3C 鼠标事件模型。然而，对标准化的支持（和意愿）正在不断增长。2012 年 9 月，微软向 W3C 提交了 MSPointers 以进行标准化，并在 2015 年 2 月，我们达到了 W3C 推荐标准：http://www.w3.org/TR/pointerevents。MS Open Tech 团队还发布了 Webkit 的 Pointer Events 初始原型，最近，Mozilla 宣布 Firefox Nightly 支持 Pointer Events！

我之所以试验 Pointer Events，并非基于设备市场份额，而是因为微软处理基本输入的方式与当前网络上可用的方式截然不同，它值得我们关注其“可能性”。区别在于开发人员可以编写更抽象的输入形式，称为“Pointer”。Pointer 可以是鼠标光标、笔、手指或多个手指在屏幕上创建的任何接触点。这样您就不必浪费时间为每种输入类型单独编写代码。

如果您正在运行 IE10，您需要为 API 添加前缀或使用我们的 polyfill 库Hand.js。您可以在此处找到带有前缀的原始文章：统一触控和鼠标：Pointer Events 如何让跨浏览器触控支持变得简单

概念

我们将首先回顾在 Internet Explorer 11、Microsoft Edge 或 Firefox Nightly 中运行的应用程序，它们公开了 Pointer Events API，然后是支持所有浏览器的解决方案。之后，我们将看到如何利用 IE/MS Edge 手势服务，这将帮助您以简单的方式在 JavaScript 代码中处理触控。由于 Windows 8.1/10 和 Windows Phone 8.1/Mobile 10 共享相同的浏览器引擎，因此这两个平台的代码和概念是相同的。此外，您在本文中学到的所有触控知识都将帮助您在基于 HTML5/JS 构建的 Windows 应用商店应用程序中执行相同的任务，因为这同样使用了相同的引擎。

Pointer 背后的思想是让您通过单一代码库，使用与您已知的经典鼠标事件匹配的模式来处理鼠标、笔和触控设备。事实上，鼠标、笔和触控都有一些共同的属性：例如，您可以用它们移动指针，也可以用它们点击元素。那么，让我们通过相同的代码来处理这些场景吧！Pointers 将聚合这些共同的属性，并以与鼠标事件相似的方式公开它们。

最明显的共同事件是：pointerdown、pointermove 和 pointerup，它们直接映射到等效的鼠标事件。您将获得屏幕的 X 和 Y 坐标作为输出。

您还有一些特定的事件，例如：pointerover、pointerout 或 pointercancel

当然，在某些情况下，您可能希望以与默认鼠标行为不同的方式处理触控，以提供不同的用户体验。此外，多点触控屏幕让用户可以轻松地旋转、缩放或平移某些元素。笔/触控笔甚至可以提供鼠标无法提供的压力信息。Pointer Events 仍将聚合这些差异，并允许您为每个设备的特定功能构建自定义代码。

注意：如果您有 Windows 8.1/10 设备或使用 Windows Phone 8+ 的触控屏，当然最好测试以下嵌入式示例。不过，您仍然有一些选择。

通过使用随免费 Visual Studio 2013/2015 Express 开发工具提供的 Windows 8.1/10 模拟器，获得第一级体验。有关其工作原理的更多详细信息，请阅读这篇文章：使用 Windows 8 模拟器和 VS 2012 调试 IE10 触控事件和您的响应式设计。
还可以观看此视频，文章末尾也提供了其他格式。该视频演示了所有以下示例在支持触控、笔和鼠标的 Windows 8 平板电脑上运行的情况。
如果您无法访问 Windows 8 设备，可以使用像 BrowserStack 这样的虚拟跨浏览器测试服务进行交互式测试，或者下载我们的一个虚拟机。

处理简单的触控事件

第1步：在JS中不做任何操作，但添加一行CSS

让我们从基础开始。您可以轻松地将任何处理鼠标事件的现有 JavaScript 代码拿来，它将直接使用 Internet Explorer 10/11 和 MS Edge 中的一些笔或触控设备。如果您未在代码中处理 Pointers Events，IE 和 MS Edge 确实会作为最后手段触发鼠标事件。这就是为什么，即使开发人员从未想到有一天会有人以这种方式操作，您仍然可以用手指“点击”按钮或任何网页上的任何元素。因此，任何注册到 mouvedown 和/或 mouseup 事件的代码都将无需修改即可工作。但 mouvemove 呢？

让我们回顾一下默认行为来回答这个问题。例如，我们来看这段代码。

<!DOCTYPE html>
<html>
<head>
    <title>Touch article sample 1</title>
</head>
<body>
    <canvas id="drawSurface" width="400px" height="400px" style="border: 1px dashed black;">
    </canvas>
    <script>
        var canvas = document.getElementById("drawSurface");
        var context = canvas.getContext("2d");
        context.fillStyle = "rgba(0, 0, 255, 0.5)";

        canvas.addEventListener("mousemove", paint, false);

        function paint(event) {
            context.fillRect(event.clientX, event.clientY, 10, 10);
        }
    </script>
</body>
</html>

它通过跟踪鼠标的移动，简单地在一个 HTML5 canvas 元素内绘制一些 10px x 10px 的蓝色方块。要测试它，请将鼠标移到方框内。如果您有触摸屏，请尝试与 canvas 互动，亲自检查当前行为。

示例 0：如果您不执行任何操作，则为默认行为

结果：只有 mousedown/up/click 适用于触控

交互式示例在此处可用

您会看到，当您在画布元素内移动鼠标时，它会绘制一系列蓝色方块。但如果改用触控，它只会在您点击画布元素的确切位置绘制一个唯一的方块。一旦您尝试在画布元素中移动手指，浏览器将尝试在页面内平移，因为这是定义的默认行为。

然后，您需要指定您希望覆盖浏览器的默认行为，并告诉它将触控事件重定向到您的 JavaScript 代码，而不是尝试解释它。为此，请定位页面中不应再响应默认行为的元素，并向它们应用此 CSS 规则。

touch-action: auto | none | pan-x | pan-y;

根据您希望过滤或不过滤的内容，有各种可用值。您可以在 IE11、MS Edge 和 Firefox Nightly 的 W3C 规范中找到这些值的描述：touch-action css 属性，以及 IE10：构建触控友好网站的指南

经典的用例是当您的页面中有一个地图控件时。您希望允许用户在地图区域内平移和缩放，但保留页面其余部分的默认行为。在这种情况下，您将仅将此 CSS 规则应用于显示地图的 HTML 容器。

在我们的例子中，添加此 CSS 块

<style>
    #drawSurface
    {
        touch-action: none; /* Disable touch behaviors, like pan and zoom */
    }
</style>

现在产生这个结果

示例 1：添加 touch-action: none 之后

结果：默认浏览器平移被禁用，mousemove 有效，但只支持 1 根手指

交互式示例在此处可用

如果正在测试 IE：请使用带前缀的版本。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

现在，当您在画布元素内移动手指时，它就像鼠标指针一样。这太酷了！但您很快就会问自己一个问题：为什么这段代码只跟踪一根手指？嗯，这是因为我们只是在 IE 和 MS Edge 为了提供非常基本的触控体验而做的最后一件事：将您的一根手指映射来模拟鼠标。据我所知，我们一次只使用一个鼠标。所以使用这种方法，一个鼠标 === 最多一根手指。那么，如何处理多点触控事件呢？

第 2 步：使用 Pointer Events 代替鼠标事件

使用任何您现有的代码，并将“mousedown/up/move”的注册替换为“pointerdown/up/move”（在 IE10 中为“MSPointerDown/Up/Move”），您的代码将直接在启用 Pointer Events 的浏览器中支持多点触控体验！

例如，在前面的示例中，将此行代码更改为

canvas.addEventListener("mousemove", paint, false);

改为这个

canvas.addEventListener("pointermove", paint, false);

你将得到这个结果

示例 2：使用 pointermove 代替 mouse move

结果：多点触控有效

交互式示例在此处可用

如果正在测试 IE：请使用带前缀的版本。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

现在，您可以绘制任意数量的方块系列，只要您的屏幕支持多少个触控点！更好的是，相同的代码适用于触控、鼠标和笔。这意味着，例如，您可以使用鼠标绘制一些线条，同时用手指绘制其他线条。

如果您希望根据输入类型更改代码的行为，可以通过 pointerType 属性值进行测试。例如，假设我们希望为手指绘制 10 像素 × 10 像素的红色方块，为笔绘制 5 像素 × 5 像素的绿色方块，为鼠标绘制 2 像素 × 2 像素的蓝色方块。您需要将之前的处理程序（paint 函数）替换为以下代码：

function paint(event) {
    if (event.pointerType) {
        switch (event.pointerType) {
            case "touch":
                // A touchscreen was used
                // Drawing in red with a square of 10
                context.fillStyle = "rgba(255, 0, 0, 0.5)";
                squaresize = 10;
                break;
            case "pen":
                // A pen was used
                // Drawing in green with a square of 5
                context.fillStyle = "rgba(0, 255, 0, 0.5)";
                squaresize = 5;
                break;
            case "mouse":
                // A mouse was used
                // Drawing in blue with a squre of 2
                context.fillStyle = "rgba(0, 0, 255, 0.5)";
                squaresize = 2;
                break;
        }

        context.fillRect(event.clientX, event.clientY, squaresize, squaresize);
    }
}

您可以在这里测试结果

示例 2b：测试 pointerType 以测试触控/笔或鼠标

结果：您可以更改鼠标/笔/触控的行为，但自 2a 以来，代码现在只在支持 Pointer Events 的浏览器中有效

交互式示例在此处可用

如果正在测试 IE：请在此处测试带前缀的版本：here。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

如果您足够幸运，拥有支持这三种输入类型的设备（例如索尼 Duo 11、微软 Surface Pro 或您在 BUILD2011 期间拥有的一些三星平板电脑），您将能够根据输入类型看到三种不同的绘图。很棒，不是吗？

不过，这段代码仍然存在一个问题。它现在在支持 Pointer Events 的浏览器中正确处理所有类型的输入，但在 IE9、Chrome、Opera 和 Safari 等其他浏览器中根本不起作用。

第 3 步：执行功能检测以提供回退代码

正如您可能已经意识到的那样，处理多浏览器支持的最佳方法是进行功能检测。在我们的例子中，您需要测试这一点。

window.PointerEvent

请注意，这仅告诉您当前浏览器是否支持 Pointer。它不会告诉您是否支持触控。要测试是否支持触控，您需要检查 maxTouchPoints。

总而言之，要在其他浏览器中拥有支持 Pointer 并正确回退到鼠标事件的代码，您需要像这样的代码：

var canvas = document.getElementById("drawSurface");
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, 0.5)";
if (window.PointerEvent) {
    // Pointer events are supported.
    canvas.addEventListener("pointermove", paint, false);
}
else {
    canvas.addEventListener("mousemove", paint, false);
}

function paint(event) {
    var squaresize = 2;
    if (event.pointerType) {
        switch (event.pointerType) {
            case "touch":
                // A touchscreen was used
                // Drawing in red with a square of 10
                context.fillStyle = "rgba(255, 0, 0, 0.5)";
                squaresize = 10;
                break;
            case "pen":
                // A pen was used
                // Drawing in green with a square of 5
                context.fillStyle = "rgba(0, 255, 0, 0.5)";
                squaresize = 5;
                break;
            case "mouse":
                // A mouse was used
                // Drawing in blue with a square of 2
                context.fillStyle = "rgba(0, 0, 255, 0.5)";
                squaresize = 2;
                break;
        }
    }

    context.fillRect(event.clientX, event.clientY, squaresize, squaresize);
}

您可以在这里再次测试结果

示例 3：功能检测 PointerEvent 以提供回退

结果：IE11/MS Edge 和 Firefox Nightly 提供完整的体验，而其他浏览器则提供默认鼠标事件

交互式示例在此处可用

如果正在测试 IE：带前缀的版本在此处。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

第 4 步：支持所有触控实现

如果您想更进一步，支持所有浏览器和所有触控实现，您有两种选择。

编写代码并行处理两种事件模型，例如本文中描述的：在所有浏览器中处理多点触控和鼠标输入
只需添加对 HandJS 的引用，这是我的朋友 David Catuhe 编写的非常棒的 JavaScript polyfill 库，正如他的文章所描述的：HandJS，一个支持所有浏览器中 pointer 事件的 polyfill

David 编写了一个很酷的小型库，让您可以编写利用 Pointer Events 规范的代码。正如我在本文开头所提到的，微软最近向 W3C 提交了 MSPointer Events 规范进行标准化。W3C 创建了一个新的工作组，并已经基于微软的提案发布了 W3C 推荐标准。MS Open Tech 团队还发布了 Webkit 的 Pointer Events 初始原型，您可能对此感兴趣。

尽管 Pointer Events 规范尚未成为标准，但您仍然可以利用 David 的 Polyfill 来实现支持它的代码，并为 Pointer Events 成为所有现代浏览器中实现的标准做好准备。使用 David 的库，事件将在 IE10 上传播到 MSPointer，在基于 Webkit 的浏览器上传播到 Touch Events，最后作为最后手段传播到鼠标事件。在 Internet Explorer 11、MS Edge 和 Firefox Nightly 中，它将简单地被禁用，因为它们实现了 W3C 规范的最新版本。这太酷了！查看他的文章，了解它的工作原理。请注意，这个 polyfill 也将非常有用，可以支持旧浏览器，并优雅地回退到鼠标事件。

要了解如何使用此库，请参阅这篇文章：借助 Hand.JS 创建适用于所有触控模型的通用虚拟触控摇杆，该文章展示了如何使用指针事件编写虚拟触控摇杆。多亏了 HandJS，它将在 Windows 8/RT 上的 IE10、Windows Phone 8、iPad/iPhone 和 Android 设备上使用相同的代码库工作！

我们还在我们的 WebGL 开源 3D 引擎中使用了 Hand.js：http://www.babylonjs.com/。在您的 WebGL 兼容浏览器中启动一个场景，并将相机切换到“触控相机”进行单点触控控制，或“虚拟摇杆相机”以在控制面板中使用您的两个拇指。

您将能够凭借手指的力量在 3D 世界中移动！

识别简单手势

现在我们已经了解了如何处理多点触控，接下来我们将探讨如何识别简单的手势，例如轻触或按住元素，然后是一些更高级的手势，例如平移或缩放元素。

幸运的是，IE10/11 和 MS Edge 提供了一个 MSGesture 对象，它将帮助我们。请注意，此对象目前仅限于 IE 和 MS Edge，不属于 W3C 规范的一部分。结合 IE11 中的 MSCSSMatrix 元素（MS Edge 倾向于使用 WebKitCSSMatrix），您会发现可以以非常简单的方式构建非常有趣的多点触控体验。CSSMatrix 确实表示一个 4x4 齐次矩阵，它允许文档对象模型 (DOM) 脚本访问 CSS 2D 和 3D 变换功能。但在玩转这些之前，让我们从基础开始。

基本概念是首先注册 pointerdown。然后在处理 pointerdown 的处理程序内部，您需要选择要发送到 MSGesture 对象的指针，以使其检测特定手势。然后它将触发以下事件之一：MSGestureTap、MSGestureHold、MSGestureStart、MSGestureChange、MSGestureEnd、MSInertiaStart。MSGesture 对象将把所有提交的指针作为输入参数，并在它们之上应用手势识别器，以提供格式化数据作为输出。您唯一需要做的就是选择/过滤您希望成为手势一部分的指针（根据它们的 ID、屏幕坐标，或者任何您想要的方式……）。MSGesture 对象之后将为您完成所有魔法。

示例 1：处理按住手势

我们将了解如何按住一个元素（一个包含图像作为背景的简单 DIV）。一旦元素被按住，我们将添加一些角来向用户指示他当前已选中此元素。这些角将通过动态创建 4 个 div 并将其添加到图像的每个角的顶部，然后利用一些 CSS 技巧，智能地使用变换和线性渐变来获得类似这样的效果：

顺序如下：

在您感兴趣的 HTML 元素上注册 pointerdown 和 MSPointerHold 事件
创建一个将目标设置为同一 HTML 元素的 MSGesture 对象
在 pointerdown 处理程序内部，将您希望监控的各种 PointerID 添加到 MSGesture 对象（根据您希望实现的目标，可以是所有 ID 或其中一部分）
在 MSPointerHold 事件处理程序内部，检查详细信息以判断用户是否刚刚开始按住手势 (MSGESTURE_FLAG_BEGIN 标志)。如果是，则添加角；如果不是，则移除角。

这导致以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Touch article sample 5: simple gesture handler</title>
    <link rel="stylesheet" type="text/css" href="toucharticle.css" />
    <script src="Corners.js"></script>
</head>
<body>
    <div id="myGreatPicture" class="container" />
    <script>
        var myGreatPic = document.getElementById("myGreatPicture");
        // Creating a new MSGesture that will monitor the myGreatPic DOM Element
        var myGreatPicAssociatedGesture = new MSGesture();
        myGreatPicAssociatedGesture.target = myGreatPic;

        // You need to first register to pointerdown to be able to
        // have access to more complex Gesture events
        myGreatPic.addEventListener("pointerdown", pointerdown, false);
        myGreatPic.addEventListener("MSGestureHold", holded, false);

        // Once pointer down raised, we're sending all pointers to the MSGesture object
        function pointerdown(event) {
            myGreatPicAssociatedGesture.addPointer(event.pointerId);
        }

        // This event will be triggered by the MSGesture object
        // based on the pointers provided during the MSPointerDown event
        function holded(event) {
            // The gesture begins, we're adding the corners
            if (event.detail === event.MSGESTURE_FLAG_BEGIN) {
                Corners.append(myGreatPic);
            }
            else {
                // The user has released his finger, the gesture ends
                // We're removing the corners
                Corners.remove(myGreatPic);
            }
        }

        // To avoid having the equivalent of the contextual  
        // "right click" menu being displayed on the MSPointerUp event, 
        // we're preventing the default behavior
        myGreatPic.addEventListener("contextmenu", function (e) {
            e.preventDefault();    // Disables system menu
        }, false);
    </script>
</body>
</html>

结果如下

如果正在测试 IE：带前缀的 Pointers 版本在此处。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

尝试仅点击或鼠标点击该元素，没有任何反应。触控并按住一根手指在图像上，或长按鼠标，角落会出现。松开手指，角落消失。

触控并按住图像上两根或更多手指，没有任何反应，因为只有当一根独特的手指按住元素时，Hold 手势才会被触发。

注意：白色边框、角和背景图像是通过 toucharticle.css 中定义的 CSS 设置的。Corners.js 只是简单地创建了 4 个 DIV（使用 append 函数），并将它们放置在主元素上方，每个角都带有适当的 CSS 类。

不过，目前的结果仍有我不满意的地方。一旦你按住图片，只要你稍微移动手指，就会触发并被处理程序捕获 MSGESTURE_FLAG_CANCEL 标志，从而移除角落。我宁愿只在用户在图片上方任何地方松开手指时，或者只要他将手指移出图片限定的区域时才移除角落。为此，我们将在 pointerup 或 pointerout 事件上移除角落。这提供了以下代码：

var myGreatPic = document.getElementById("myGreatPicture");
// Creating a new MSGesture that will monitor the myGreatPic DOM Element
var myGreatPicAssociatedGesture = new MSGesture();
myGreatPicAssociatedGesture.target = myGreatPic;

// You need to first register to pointerdown to be able to
// have access to more complex Gesture events
myGreatPic.addEventListener("pointerdown", pointerdown, false);
myGreatPic.addEventListener("MSGestureHold", holded, false);
myGreatPic.addEventListener("pointerup", removecorners, false);
myGreatPic.addEventListener("pointerout", removecorners, false);

// Once touched, we're sending all pointers to the MSGesture object
function pointerdown(event) {
    myGreatPicAssociatedGesture.addPointer(event.pointerId);
}

// This event will be triggered by the MSGesture object
// based on the pointers provided during the pointerdown event
function holded(event) {
    // The gesture begins, we're adding the corners
    if (event.detail === event.MSGESTURE_FLAG_BEGIN) {
        Corners.append(myGreatPic);
    }
}

// We're removing the corners on pointer Up or Out
function removecorners(event) {
    Corners.remove(myGreatPic);
}

// To avoid having the equivalent of the contextual  
// "right click" menu being displayed on the pointerup event, 
// we're preventing the default behavior
myGreatPic.addEventListener("contextmenu", function (e) {
    e.preventDefault();    // Disables system menu
}, false);

现在提供了我想要的行为

如果正在测试 IE：请在此处使用不带前缀的 Pointers 版本进行测试：here。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

示例 2：处理缩放、平移和旋转

最后，如果您想缩放、平移或旋转一个元素，您只需编写几行代码即可。首先需要注册到 MSGestureChange 事件。此事件将通过 MSGestureEvent 对象文档中描述的各种属性向您发送当前应用于您的 HTML 元素的旋转、缩放、translationX、translationY 等详细信息。

更棒的是，默认情况下，MSGesture 对象免费提供了一个惯性算法。这意味着您可以用手指将 HTML 元素抛到屏幕上，动画将由它来处理。

最后，为了反映 MSGesture 发送的这些变化，您需要相应地移动元素。最简单的方法是应用一些 CSS 变换，将旋转、缩放、平移细节映射到您的手指手势。为此，请使用 MSCSSMatrix 元素。

总之，如果您想将所有这些酷炫的手势添加到之前的示例中，请像这样注册事件：

myGreatPic.addEventListener("MSGestureChange", manipulateElement, false);

并使用以下处理程序

function manipulateElement(e) {
    // Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
    // if (e.detail == e.MSGESTURE_FLAG_INERTIA)
    // return;

    var m;
    if (window.WebKitCSSMatrix) {
        // Get the latest CSS transform on the element in MS Edge 
        m = new WebKitCSSMatrix(window.getComputedStyle(myGreatPic, null).transform); 
    }
    else if (window.MSCSSMatrix) {
        // Get the latest CSS transform on the element in IE11 
        m = new MSCSSMatrix(window.getComputedStyle(myGreatPic, null).transform);
    }
    if (m) {
        e.target.style.transform = m
        .translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
        .rotate(e.rotation * 180 / Math.PI) // Apply Rotation
        .scale(e.scale) // Apply Scale
        .translate(e.translationX, e.translationY) // Apply Translation
        .translate(-e.offsetX, -e.offsetY); // Move the transform origin back
    }
}

这为您提供了这个最终示例

如果正在测试 IE：请在此处测试带前缀的 Pointers 版本：http://david.blob.core.windows.net/html5/touchsample7.html/。Microsoft Edge 支持最新版本，您也可以随时查看 Web 平台状态以及其他现代浏览器。

尝试用一根或多根手指在黑色区域内移动和投掷图像。还可以尝试用两根或多根手指缩放或旋转元素。结果令人惊叹，而且代码非常简单，因为所有复杂性都由 IE / MS Edge 本机处理。

视频和所有示例的直接链接

如果您没有适用于 IE / MS Edge 的触控屏体验，并且您想知道这些示例是如何工作的，请观看此视频，其中我将在三星 BUILD2011 平板电脑上描述本文中分享的所有示例。

点击此处观看上述视频

您也可以在此处查看所有这些内容

统一触摸和鼠标：指针事件将如何轻松实现跨浏览器触摸支持

概念

处理简单的触控事件

第1步：在JS中不做任何操作，但添加一行CSS

第 2 步：使用 Pointer Events 代替鼠标事件

第 3 步：执行功能检测以提供回退代码

第 4 步：支持所有触控实现

识别简单手势

示例 1：处理按住手势

示例 2：处理缩放、平移和旋转

视频和所有示例的直接链接

相关资源

更多关于 JavaScript 的实践