Question

在平板电脑上处理触控/指针事件的最佳方法是什么？我觉得它的行为很混乱。我写了一个脚本，只是设置所有事件处理程序来弄清楚事件是如何被触发的（设置本机事件处理程序，使用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）都按预期顺序触发：向下，向上，向上。

但是，当我使用tochscreen

时

首先一个指针移动，然后指针向下。在屏幕上，我的手指周围出现一个矩形。
重复的移动事件在不移动我的手指
当我移动手指时不再触发事件
删除手指时的pointerend事件

我做错了什么？调用preventDefault，stopPropagation或stopImmediatePropagation不会更改此行为。设置css pointer-events：none; 禁用所有事件。

Complete script on codepen

Answer 1

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

例如：

#prevent, #stop, #stopimmediate {
    touch-action: none;
}

Answer 2

尝试我的触摸手势抽象库DeepTissue。 IE的触摸模型非常简单，因为指针事件将所有输入模态抽象为公共API。 Chrome让事情变得复杂，但这是另一个故事：）。

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

指针事件IE11 / Surface

2 个答案: