指针事件如何使跨浏览器触摸支持变得容易

程序员文章站 2022-05-29 23:09:22

...

这篇文章是从微软的Web开发系列的一部分。 感谢您支持谁使SitePoint可能的合作伙伴。

我经常收到问题从开发人员喜欢“， 与手机和平板电脑这么多的支持触摸的设备，我从哪里开始？ ”和“ 什么是建立触摸输入的最简单的方法？ ”简短的回答：‘这是复杂的’。 肯定有一个更统一的方式来处理网络上的多点触摸输入 - 在现代，触摸功能的浏览器或为旧版本浏览器的回退。在这篇文章中，我想向你展示使用一些浏览器实验指针 -一个新兴的多点触控技术和polyfills，使跨浏览器的支持，以及不那么复杂 。那种代码，你也可以尝试使用，轻松地在自己的网站上使用。

首先，许多触控技术正在不断发展的网络上-对浏览器的支持，你需要寻找的iOS的触摸事件模型和W3C鼠标事件在附加到模型MSPointers ，支持所有浏览器。然而，有越来越多的支持（和意愿）规范。在2012年9月，微软提交MSPointers给W3C标准化并在2015年2月，我们已经达到了W3C推荐 ： http://www.w3.org/TR/pointerevents 。在MS开放技术团队还发布了一个初步的指针事件原型的Webkit ，最近， Mozilla已经宣布在Firefox每晚指针活动的支持！

为什么我用指针活动实验的原因不是基于设备共享-这是因为微软的基本输入处理方法比什么是目前可在网络上完全不同，值得一看什么，它可能成为 。不同的是，开发人员可以编写到输入的一个更抽象的形式，被称为“指针”。指针可以是通过鼠标光标，笔，手指或多个手指作出的屏幕上的接触的任何点。所以你不要浪费时间分别编码每一个类型的输入。

如果你正在运行的IE10，你需要的前缀API或使用我们的填充工具库 Hand.js 。 你会发现与前缀这里原来的文章： 统一触摸和鼠标：鼠标事件将如何进行跨浏览器支持触控容易

该概念

我们将通过审查的Internet Explorer 11，微软边缘，或Firefox每晚暴露的指针事件API，然后解决方案，支持所有浏览器中运行的应用程序开始。在那之后，我们将看到如何可以利用IE / MS边缘手势服务，这将帮助你在处理JavaScript代码的触摸一个简单的方法的优势。作为视窗8.1 / 10和Windows Phone 8.1 /移动10共享相同的浏览器引擎，代码和概念是用于两个平台相同。此外，您将了解触摸这篇文章中，一切都会帮你做的非常相同的任务的Windows Store应用程序可以使用HTML5 / JS建，因为这又是正在使用相同的引擎。

指针背后的想法是让您在使用匹配你已经知道了经典的鼠标事件，一个模式通过单一代码库寻址鼠标，笔和触摸设备。事实上，鼠标，笔和触摸有一些共同的属性：你可以移动一个指针与他们就可以元素上点击他们的实例。让我们然后通过同样的一段代码解决这些场景！指针将汇总这些共同的属性和比鼠标事件类似的方式揭露他们。

最明显的共同事件，则： pointerdown ， pointermove ＆ pointerup其直接映射到相当于鼠标事件。您将有屏幕的X和Y坐标的输出。

你也一样特定事件： pointerover ， pointerout或pointercancel

指针事件如何使跨浏览器触摸支持变得容易

但当然，可能有也有一些情况下，你要地址触摸以不同的方式比默认的鼠标行为，以提供不同的UX。此外，由于多点触摸屏，你可以很容易地让用户旋转，缩放或平移的一些元素。笔/手写笔，甚至可以为您提供一定的压力信息，鼠标不能。指针事件仍然会聚集这些差异，会让你建立的每个设备的具体一些自定义代码。

注：这将是更好的测试下面的嵌入式样本，如果你有一个Windows 8.1 / 10设备上当然是一个触摸屏，或者如果您使用的是Windows Phone的8+。不过，你可以有一些选择：

使用Windows 8.1 / 10模拟器获得的经验，第一级附带的免费的Visual Studio二千〇一十五分之二千〇十三Express开发工具。有关如何操作的更多信息，请阅读这篇文章：使用Windows 8模拟器与VS 2012调试IE10的触摸事件与您的响应式设计。
看一看到这个视频其它格式也可在文章的结尾。所述视频演示所有样品下面在Windows 8平板支撑触摸，笔和鼠标。
使用就像一个虚拟的跨浏览测试服务BrowserStack测试交互，如果你没有访问到Windows 8设备或我们的虚拟机下载一个。

处理简单的触摸事件

第1步：什么也不做JS，但添加一行的CSS

让我们从基础开始。作为-是使用Internet Explorer 10/11和MS边缘的一些笔或触摸设备您可以轻松地采取任何现有的JavaScript代码来处理鼠标事件，这将只是工作。 IE和MS边缘确实射击鼠标事件作为最后的手段，如果你不处理指针事件在你的代码。这就是为什么，你可以上的按钮或使用你的手指，即使开发商从来没有想过有一天会有人这样做过任何网页的任何元素的“点击”。因此，任何代码注册到的mousedown和/或鼠标松开事件将根本没有修改工作。但对于鼠标移动？

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

 <!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的正方形一些蓝色10px的。 为了测试它，移动你的鼠标箱内。 如果你有一个触摸屏，尝试与画布交互自己目前的行为进行检查 ：

指针事件如何使跨浏览器触摸支持变得容易

如果你默认行为什么：样品0
结果：只有鼠标按下/上/点击触摸作品

可用的互动例子在这里

你会看到比当你移动鼠标的canvas元素里面，它会得出一些系列的蓝色方形的。但是，使用触摸相反，它只会在精确的位置，你会挖掘canvas元素绘制一个正方形的独特。只要你将尝试移动你的手指在canvas元素时，浏览器将尝试在页面内锅，因为它是被定义默认行为。

然后你需要指定你想覆盖浏览器的默认行为，并告诉它的触摸事件JavaScript代码重定向而不是试图去解释它。为此，目标不应该再发生反应，默认行为，并应用该CSS规则给他们你的页面的元素：

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

你必须根据你想过滤器或没有什么可用的各种值。你会发现在IE11，MS Edge和火狐每晚W3C规范描述的值：触摸动作CSS属性：和IE10 建筑触摸友好的网站指南

经典的用例是当你在你的页面的地图控制。你想让用户平移和缩放的地图区域内，但保持其默认值的页面的其余部分。在这种情况下，你将只适用于HTML容器暴露在地图这CSS规则。

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

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

现在产生这样的结果：

指针事件如何使跨浏览器触摸支持变得容易

示例1：只是增加触摸动作后：无
结果：默认的浏览器禁用平移和鼠标移动的作品，但与1根手指

可用的互动例子在这里

如果在测试的IE浏览器：使用前缀版本在这里。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起

现在，当你移动你的手指在画布元素中，它的行为像一个鼠标指针。这很酷！但你很快就会问自己这样一个问题：为什么会发生这种代码只跟踪一个手指？那么，这是因为我们只是在最后一件事IE和MS边缘做提供了非常基本的触控体验下降：你的手指映射一个模拟鼠标。而据我所知，我们只使用了1只小鼠在一个时间。所以，一个鼠标===使用这种方法的一个手指最大。那么，如何处理多点触摸事件？

第2步：使用指针事件，而不是鼠标事件

采取任何现有的代码，并通过“pointerdown /上/移动”（或“MSPointerDown /上/移动”在IE10）更换您的注册到“鼠标按下/上/移动”，你的代码将直接支持多点触控体验中指针事件功能的浏览器！

例如，以前的样品中，改变这一行的代码：

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

这一个：

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

你会得到这样的结果：

指针事件如何使跨浏览器触摸支持变得容易

示例2：使用pointermove代替鼠标移动的
结果：多点触控的作品

可用的互动例子在这里

如果在测试的IE浏览器：使用前缀版本在这里。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起。

现在，您可以得出许多方格系列作为触摸点在屏幕的支持！更妙的是，同样的代码适用于触摸，鼠标和笔。这意味着，例如，你可以用你的鼠标画出你正在使用你的手指画等线路，同时一些行。

如果你想改变根据输入类型代码的行为，你可以测试通过pointerType属性值。例如，让我们想象一下，我们想通过10px的红色正方形的手指，通过为5px 5px的绿色正方形的笔和2px的2px的通过鼠标蓝色正方形得出一些10px的。您需要替换之前的处理器（油漆功能）这一个：

 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 现在的代码只能在浏览器支持鼠标事件 的行为

可用的互动例子在这里

如果在测试的IE：测试版的前缀这里。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起。

如果你足够幸运有一个设备支持3种类型的输入（如索尼双核11， 微软Surface Pro或三星平板 BUILD2011过程中的一些你有），你将能够看到3种基于图形的输入类型。太好了，是不是？

不过，有一个与此代码的问题。现在处理所有类型的输入，在浏览器中支持指针事件正常，但在所有在其他浏览器，如IE9，Chrome浏览器，歌剧和Safari浏览器无法正常工作。

步骤3：做特征检测，以提供一个备用的代码

正如你可能已经知道，最好的方法来处理多浏览器的支持是做功能检测。在我们的例子中，你需要测试这一点：

 window.PointerEvent

请注意，如果当前的浏览器支持指针这只是告诉你。如果触摸支持或不它不会告诉你。要为触摸或不测试支持，你需要检查maxTouchPoints 。

总之，有一个代码，以支持指针和回落适当地在其他浏览器的鼠标事件，你需要像这样的代码：

 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边缘和Firefox每晚全面完整的经验和默认的鼠标事件在其他浏览器

可用的互动例子在这里

如果在测试的IE：前缀的版本在这里。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起。

第4步：支持全触控的实现

如果你想走得更远，并支持所有浏览器和全触摸实现，你有两个选择：

编写代码来解决并行两个事件模型，如本文中描述，例如：处理在所有浏览器多点触摸和鼠标输入
只需添加到HandJS，就像在他的文章中描述我的朋友大卫Catuhe写的真棒JavaScript的填充工具库的引用： HandJS一个填充工具对每个浏览器支持鼠标事件

大卫写了一个很酷的小库，可以让你写代码利用指针事件规范。正如我在本文的介绍中提到，微软最近提交MSPointer活动规范W3C标准化。 W3C的创造了一个新的工作组，并已经出版了W3C推荐标准基于微软的提议。在MS开放技术团队还发布了一个初步的指针事件原型的Webkit ，你可能会在感兴趣。

当指针事件规范还没有一个标准，你仍然可以已经实现了代码，支持它凭借大卫的填充工具，并准备好当指针事件会在所有现代浏览器中实现的标准。随着大卫库的事件将被传播到MSPointer IE10中，触摸基于WebKit浏览器活动，最后到鼠标事件作为最后的手段。在Internet Explorer 11，MS Edge和火狐每晚，因为他们实现W3C规范的最新版本将是简单地禁用。它是该死的冷静！看看他的文章，以发现和了解它是如何工作的。请注意，这也填充工具将是非常有用的，然后支持旧的浏览器与优雅的回退鼠标事件。

要对如何使用这个库的想法，请看看这篇文章：为所有人创造触控机型感谢的通用虚拟触摸摇杆努力Hand.JS如何编写使用指针事件的虚拟触摸摇杆，其节目。由于HandJS，它将在工作IE10在Windows 8 / RT的Windows Phone 8，的iPad / iPhone和Android设备使用非常相同的代码库！

：我们也在我们的WebGL的开源3D引擎使用Hand.js http://www.babylonjs.com/ 。启动场景在你的WebGL兼容的浏览器和相机切换到“触摸相机”的单触式控制或“虚拟操纵杆摄像头”用你的两个大拇指在控制面板中：

指针事件如何使跨浏览器触摸支持变得容易

而你就可以进入3D世界感谢你的一根或多根手指的力量！

认识简单的手势

现在，我们已经看到了如何处理多点触控，让我们来看看如何识别像敲击或保持一个元素，然后一些更高级的手势像翻译或缩放元素简单的手势。

值得庆幸的是，IE10 / 11和MS边缘提供MSGesture那将帮助我们的对象。请注意，此对象当前特定于IE和MS边缘而不是W3C规范的一部分。用组合MSCSSMatrix在IE11（MS边缘，而使用元素WebKitCSSMatrix之一），你会看到，你可以建立一个非常简单的方法非常有趣的多点触控体验。 CSSMatrix确实代表一个4×4矩阵均匀，使文档对象模型（DOM）脚本访问CSS 2-d和3-d变换功能。但是，与打之前，让我们从基础开始。

基座概念是第一寄存器pointerdown。 然后，处理程序照顾pointerdown里面，你需要选择 你想发送给MSGesture对象让它检测特定的手势，其指针 。然后，它会引发这些事件之一： MSGestureTap ， MSGestureHold ， MSGestureStart ， MSGestureChange ， MSGestureEnd ， MSInertiaStart 。然后，MSGesture对象将采取一切提交作为输入参数的指针和将适用于它们的顶部上的手势识别提供一些格式化数据作为输出。你需要做的唯一的事情就是选择/过滤器，你想成为的姿态的一部分，该指针（根据自己的ID，在屏幕上的坐标无论...）。该MSGesture之后的对象会为你所有的魔法。

示例1：处理保持手势。

我们要看看如何保持一个元素（包含图像为背景的简单的div）。一旦元素会的举行，我们将增加一些角落，以指示他目前已经选择了这个元素的用户。角部通过将动态地创建所述图像的每个角的顶部添加了四个格产生。最后，一些CSS技巧将用转型和线性渐变以智能的方式来获得这样的事情：

指针事件如何使跨浏览器触摸支持变得容易

该序列将是以下之一：

注册pointerdown＆ MSPointerHold事件的HTML元素你有兴趣在
创建一个MSGesture对象，将针对这同一个HTML元素
里面的pointerdown处理程序，添加到MSGesture对象的各种PointerID你想监控（全部或其中根据您想达到什么样的一个子集）
里面的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：指针的前缀版本在这里。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起。

尝试只需轻点鼠标或单击该元素，发生什么。触摸并保持图像上只有一个手指或做久鼠标点击就可以了，角落出现。松开手指，边角消失。

触摸和图像上维持2个或多个手指，什么都不会发生作为保持姿势只被触发只有1个独特的手指握住元素。

注：白色边框，边角和背景图像是通过定义CSS设置toucharticle.css 。 Corners.js简单地创建四个的DIV（与附加功能），并将其放置在与相应的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浏览器：与指针的前缀的版本测试在这里。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起。

示例2：处理尺度，平移和旋转

最后，如果你想扩大规模，翻译或旋转的元素，你只需要编写的代码非常几行。您需要先注册到MSGestureChange事件。本次活动将通过中描述的各种属性发送给您MSGestureEvent对象像文档旋转，规模， translationX ， translationY目前应用到你的HTML元素。

更妙的是，默认情况下，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浏览器：与指针的前缀版本在这里测试： http://david.blob.core.windows.net/html5/touchsample7.html/ 。微软Edge支持最新的，你可以随时查找网络平台的地位与其他现代浏览器一起。

尝试移动，并与1个或多个手指扔在黑色区域内的图像。也尝试大规模或有2个或多个手指旋转的元素。其结果是真棒和代码很简单，因为所有的复杂性正在被IE / MS边缘本地处理。

视频和直接链接到所有样品

如果你没有为IE / MS边缘可用触摸屏体验，你想知道如何将这些样品的作品，看看这个视频里我所描述的这篇文章对三星平板电脑BUILD2011共享所有样本：
[编辑团队：请通过以下嵌入式视频替换以下占位截图： http://david.blob.core.windows.net/videos/MSPointerEventsArticleVideo.mp4 ]

指针事件如何使跨浏览器触摸支持变得容易