1

在 Surface 平板电脑上处理触摸/指针事件的最佳方式是什么？我发现它的行为相当混乱。我编写了一个脚本，它只设置所有事件处理程序来确定事件是如何被触发的（设置本机事件处理程序，使用 jQuery 作为 UI）：

$.each([
    "touchstart","touchmove","touchend",
    "mousedown","mousemove","mouseup",
    "pointerdown","pointermove","pointerup",
    "MSPointerDown","MSPointerMove","MSPointerUp"
], function(i,eventname) {

    tester.addEventListener(this, function(e) {
        msg(eventname,e);
        if ($("#prevent").is(":checked")) {
            e.preventDefault();
        }
        if ($("#stop").is(":checked")) {
            e.stopPropagation();
        }
        if ($("#stopimmediate").is(":checked")) {
            e.stopImmediatePropagation();
        }

    }, false);
});

使用鼠标垫或桌面IE11，一切都很好。所有三个事件（鼠标、指针、MSPointer）都按预期的顺序触发：向下、移动、向上。

但是，当我使用触摸屏时

  • 起初，pointermove 触发，然后指针向下。在屏幕上，我的手指周围出现了一个矩形。
  • 重复的移动事件在不移动我的手指时触发
  • 当我移动手指时不再触发任何事件
  • 移除手指时的pointerend事件

我究竟做错了什么？调用 preventDefault、stopPropagation 或 stopImmediatePropagation 不会更改此行为。设置 css指针事件：无；禁用所有事件。

在 codepen 上完成脚本

4

2 回答 2

1

当用户用手指或触控笔在屏幕上拖动时，您需要使用touch-action CSS 属性来防止浏览器的平移和缩放行为。

例如： 

#prevent, #stop, #stopimmediate {
    touch-action: none;
}
于 2014-10-08T22:17:41.500 回答
0

试试我的触摸手势抽象库DeepTissue。IE 的触摸模型非常简单，因为指针事件将所有输入模式抽象为一个通用 API。Chrome 让事情变得复杂，但那是另一回事 :)。

您真的不想卷入所有事件。我知道这会令人困惑。这就是我写 Deeptissue 的原因。它使您不必编写所有管道代码，它会选择最佳选项并挂钩到该事件集。

于 2014-10-07T20:45:11.330 回答