qt鼠标指针范围超出触摸屏_指针事件如何使跨浏览器触摸支持变得容易

最新推荐文章于 2023-09-22 17:57:22 发布

dingshi7798

最新推荐文章于 2023-09-22 17:57:22 发布

阅读量294

点赞数

文章标签：大数据 python 人工智能 java 编程语言

原文链接：https://www.sitepoint.com/pointer-events-will-make-cross-browsers-touch-support-easy/

版权

qt鼠标指针范围超出触摸屏

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

我经常从开发人员那里收到问题，例如“ 在手机和平板电脑上有这么多具有触摸功能的设备，我应该从哪里开始呢？ ”和“ 建立触摸输入最简单的方法是什么？ ”简短的回答： “这很复杂。” 当然，在现代的，支持触摸的浏览器中，或者作为较旧的浏览器的后备，确实存在一种更统一的方式来处理Web上的多点触摸输入。在本文中，我想向您展示一些使用Pointers的浏览器实验， Pointers是一种新兴的多点触摸技术和polyfill，可以使跨浏览器的支持变得更加简单 。您还可以在自己的网站上尝试并轻松使用的那种代码。

首先，网络上正在发展许多触摸技术–要获得浏览器支持，除了MSPointers之外，您还需要查看iOS触摸事件模型和W3C鼠标事件模型，以支持所有浏览器。然而，越来越多的支持（和愿意）进行标准化。 2012年9月，Microsoft向W3C提交了MSPointers进行标准化，2015年2月，我们达到了W3C建议 ： http : //www.w3.org/TR/pointerevents 。微软开放技术团队还发布了Webkit的Pointer Events原型，最近， Mozilla宣布在Firefox Nightly中支持Pointer Events ！

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

如果你正在运行的IE10，你需要的前缀API或使用我们的填充工具库 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应用商店应用中完成相同的任务，因为这再次使用了相同的引擎。

指针背后的想法是让您使用与您已经知道的经典鼠标事件相匹配的模式，通过单个代码库对鼠标，笔和触摸设备进行寻址。实际上，鼠标，笔和触摸具有一些共同点：例如，您可以使用它们移动指针，并单击它们上的元素。然后让我们通过同一段代码解决这些情况！指针将聚合那些通用属性，并以类似于鼠标事件的方式公开它们。

然后，最明显的常见事件是： pointerdown ， pointermove和pointerup ，它们直接映射到等效的鼠标事件。您将具有屏幕的X和Y坐标作为输出。

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

但是，当然，在某些情况下，您可能希望使用与默认鼠标行为不同的方式解决触摸问题，以提供不同的UX。此外，借助多点触摸屏，您可以轻松地让用户旋转，缩放或平移某些元素。笔/手写笔甚至可以为您提供鼠标无法提供的一些压力信息。指针事件仍将汇总这些差异，并使您可以针对每个设备的具体信息构建一些自定义代码。

注意：如果您在Windows 8.1 / 10设备上具有触摸屏，或者您在使用Windows Phone 8+，那么最好测试以下嵌入式示例。不过，您可以选择以下选项：

使用免费的Visual Studio 2013/2015 Express开发工具附带的Windows 8.1 / 10模拟器，获得第一级的体验。有关其工作原理的更多详细信息，请阅读本文：使用Windows 8 Simulator＆VS 2012调试IE10触摸事件和您的响应式设计。
看看这篇视频，本文结尾还提供了其他格式的视频。该视频演示了在支持触摸，笔和鼠标的Windows 8平板电脑上的以下所有示例。
如果您无权访问Windows 8设备或下载我们的其中一台VM，请使用虚拟的跨浏览器测试服务（例如BrowserStack）进行交互式测试。

处理简单的触摸事件

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

让我们从基础开始。您可以轻松获取处理鼠标事件的任何现有JavaScript代码，并且使用Internet Explorer 10/11和MS Edge中的某些笔或触摸设备即可按原样工作。如果您未在代码中处理指针事件，则IE和MS Edge确实会触发鼠标事件作为最后的手段。因此，即使开发人员从未想到某天有人会用这种方式，也可以用手指“单击”按钮或任何网页的任何元素。因此，任何注册到mousedown和/或mouseup事件的代码都可以使用，而无需进行任何修改。但是mousemove呢？

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

<!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的正方形。 要对其进行测试，请将鼠标移到该框中。 如果您有触摸屏，请尝试与画布进行交互以自行检查当前行为 ：

mousedownupclickk

示例0：如果不执行任何操作，则为默认行为
结果：只有鼠标按下/向上/点击才能触摸

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

此处提供互动示例

您会看到，当您在canvas元素内移动鼠标时，它将绘制一系列蓝色方块。但是使用touch代替，它只会在您点击画布元素的确切位置绘制一个唯一的正方形。只要您尝试在canvas元素中移动手指，浏览器就会尝试在页面内平移，因为这是已定义的默认行为。

然后，您需要指定您想要覆盖浏览器的默认行为，并告诉其将触摸事件重定向到您JavaScript代码，而不是尝试对其进行解释。为此，将页面中不再对默认行为做出React的元素作为目标，并将此CSS规则应用于它们：

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

根据您要过滤或不过滤的内容，您有各种可用的值。您将在W3C规范中找到有关IE11，MS Edge和Firefox Nightly的值： touch-action css属性和IE10：构建触摸友好站点的准则

经典的用例是页面中有地图控件。您想让用户在地图区域内平移和缩放，但保留页面其余部分的默认行为。在这种情况下，您将只在暴露地图HTML容器上应用此CSS规则。

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

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

现在会产生以下结果：

示例1：添加触摸操作后：无
结果：禁用默认浏览器平移，并且mousemove有效，但只有一根手指

此处提供互动示例

如果要测试IE：请 在此处使用带前缀的版本。 Microsoft Edge支持最新版本，您始终可以与其他现代浏览器一起查找Web平台状态

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

步骤2：使用Pointer Events而不是Mouse Events

采取任何现有代码，然后将注册替换为“ mousedown / up / move”（即IE10中的“ pointerdown / up / move”（或“ MSPointerDown / Up / Move”）），您的代码将直接支持内部的多点触控体验启用了指针事件的浏览器！

例如，在上一个示例中，更改以下代码行：

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

对此：

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

您将得到以下结果：

示例2：使用pointermove而不是鼠标移动
结果：多点触控作品

此处提供互动示例

如果要测试IE：请 在此处使用带前缀的版本。 Microsoft Edge支持最新版本，您始终可以与其他现代浏览器一起查询Web平台状态。

现在，您可以绘制屏幕支持的触点数量的正方形系列！更好的是，相同的代码适用于触摸，鼠标和笔。例如，这意味着您可以使用鼠标同时绘制其他线条，同时使用手指绘制其他线条。

如果您想根据输入的类型更改代码的行为，则可以通过pointerType属性值进行测试。例如，假设我们要为手指绘制一些10px x 10px的红色正方形，为笔绘制5px x 5px的绿色正方形，为鼠标绘制2px x 2px的蓝色正方形。您需要用以下一个替换先前的处理程序（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开始，该代码现在仅在支持指针事件的浏览器中有效

此处提供互动示例

如果要测试IE：请在此处测试带前缀的版本。 Microsoft Edge支持最新版本，您始终可以与其他现代浏览器一起查询Web平台状态。

如果您有幸拥有支持3种类型的输入的设备（如索尼Duo 11， Microsoft Surface Pro或三星Tablet ，您在BUILD2011期间曾使用过某些设备），则可以看到三种基于图形的图形在输入类型上。很好，不是吗？

但是，此代码仍然存在问题。现在，它在支持指针事件的浏览器中可以正确处理所有类型的输入，但在其他浏览器（如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的引用，HandJS是我的朋友David Catuhe编写的很棒JavaScript polyfill库，如他的文章中所述： HandJS一个polyfill用于在每个浏览器上支持指针事件

David编写了一个很棒的小库，可让您利用Pointer Events规范来编写代码。正如我在本文简介中提到的，Microsoft最近向W3C提交了MSPointer Events规范以进行标准化。 W3C创建了一个新的工作组，并且已经根据Microsoft的建议发布了W3C建议书。 MS Open Tech团队还发布了您可能感兴趣的Webkit初始Pointer Events原型。

尽管Pointer Events规范还不是标准，但您仍然可以利用David's Polyfill来实现支持该规范的代码，并为在所有现代浏览器中实现Pointer Events成为标准做好准备。使用David的库，事件将被传播到IE10上的MSPointer，基于Webkit的浏览器上的Touch Events，最后是鼠标事件，作为最后的选择。在Internet Explorer 11，MS Edge和Firefox Nightly中，由于它们实现了W3C规范的最新版本，因此将被禁用。真是太酷了！查看他的文章以发现并理解它的工作原理。请注意，此polyfill还将非常有用，以通过鼠标事件的优雅后备支持旧的浏览器。

要了解如何使用该库，请看一下本文：感谢Hand.JS ，它为您展示了如何使用指针事件编写虚拟触摸操纵杆，从而创建了适用于所有Touch模型的通用虚拟触摸操纵杆。多亏了HandJS，它可以在具有相同代码库的Windows 8 / RT，Windows Phone 8，iPad / iPhone和Android设备上的IE10上运行！

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

而且，借助您的手指，您将能够进入3D世界！

识别简单手势

现在，我们已经了解了如何处理多点触摸，下面让我们了解如何识别简单的手势，例如轻击或按住元素，然后再识别一些更高级的手势，例如平移或缩放元素。

值得庆幸的是，IE10 / 11和MS Edge提供了一个MSGesture对象，它将为我们提供帮助。请注意，此对象当前特定于IE和MS Edge，不是W3C规范的一部分。与IE11中的MSCSSMatrix元素结合使用（MS Edge宁可使用WebKitCSSMatrix ），您会看到可以以非常简单的方式构建非常有趣的多点触摸体验。 CSSMatrix确实代表了一个4×4的齐次矩阵，该矩阵使文档对象模型（DOM）脚本能够访问CSS 2-D和3-D Transforms功能。但是在开始之前，让我们从基础开始。

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

示例1：处理保持手势

我们将看到如何保存元素（一个简单的div，其中包含图像作为背景）。一旦元素被保留，我们将添加一些角以向用户指示他当前已选择该元素。将动态创建四个div并添加到图片每个角落的顶部，以生成角落。最后，一些CSS技巧将以一种聪明的方式使用变换和线性渐变来获得如下内容：

该序列将是以下序列：

在您感兴趣HTML元素上注册pointerdown和MSPointerHold事件
创建一个MSGesture对象，该对象将针对此完全相同HTML元素
在pointerdown处理程序内，将要MSGesture的各种PointerID添加到MSGesture对象（根据您要实现的目标，将其全部或其中的一个子集）
在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平台状态。

尝试仅点击或鼠标单击元素，什么也不会发生。仅用一根手指触摸并保持在图像上，或者长按鼠标单击它，就会出现角。松开手指，角落消失。

触摸并保持2个或更多手指在图像上，什么也不会发生，因为仅当1个唯一的手指按住该元素时，才会触发Hold手势。

注意：白色边框，边角和背景图片是通过toucharticle.css定义CSS设置的。 Corners.js只需创建四个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进行测试。 Microsoft Edge支持最新版本，您始终可以与其他现代浏览器一起查询Web平台状态。

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

最后，如果要缩放，平移或旋转元素，只需编写几行代码即可。您需要首先注册到MSGestureChange事件。此事件将通过MSGestureEvent对象文档中描述的各种属性（例如当前应用于HTML元素的rotation ， scale ， 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平台状态。

尝试用1个或更多手指将图像移动并扔到黑色区域内。还尝试用两个或更多个手指缩放或旋转元素。结果非常棒，并且代码非常简单，因为所有复杂性都由IE / MS Edge本地处理。

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

如果您没有可用于IE / MS Edge的触摸屏体验，并且想知道这些示例的工作原理，请观看此视频，我将在本文中介绍三星BUILD2011平板电脑上本文共享的所有示例：
[编辑团队：请使用以下嵌入式视频替换下面的占位符屏幕截图： http : //david.blob.core.windows.net/videos/MSPointerEventsArticleVideo.mp4 ]

您也可以在这里查看所有这些信息：

– 简单的触摸样本0，什么也没做
– 具有CSS触摸动作的简单触摸示例1
– 具有基本pointermove实现的简单触摸示例2a
– 具有pointerType区分的简单触摸示例2b
– 具有指针和鼠标后备功能的简单触摸示例3
– MSGesture示例1：MSGestureHold处理程序
– MSGesture示例1b：MSGestureHold处理程序
– MSGesture示例2：MSGestureChange

使用JavaScript进行更多操作

本文是Microsoft技术福音专家开发的Web开发系列文章的一部分，内容涉及实用JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎。

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：

Microsoft Edge Web Summit 2015 （新浏览器，受支持的新网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么）
哇，我可以在Mac和Linux上测试Edge和IE！（来自Rey Bango）
在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
使Web正常工作的Edge渲染引擎（来自Jacob Rossi）
使用WebGL释放3D渲染（来自David Catuhe，包括JS和babylonJS项目）
托管的Web应用程序和Web平台创新（来自Kevin Hill和Kiril Seksenov，包括JS项目）

Web平台的更多免费跨平台工具和资源：

翻译自: https://www.sitepoint.com/pointer-events-will-make-cross-browsers-touch-support-easy/

qt鼠标指针范围超出触摸屏

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qt鼠标指针范围超出触摸屏_指针事件如何使跨浏览器触摸支持变得容易

qt鼠标指针范围超出触摸屏本文是Microsoft的Web开发系列的一部分。感谢您支持使SitePoint成为可能的合作伙伴。我经常从开发人员那里收到问题，例如“ 在手机和平板电脑上有这么多具有触摸功能的设备，我应该从哪里开始呢？ ”和“ 建立触摸输入最简单的方法是什么？ ”简短的回答： “这很复杂。” 当然，在现代的，支持触摸的浏览器中，或者作为较旧的浏览器的后备，确实存在一种...
复制链接

扫一扫