javascript - 指针事件 IE11/Surface

Question

在 Surface 平板电脑上处理触摸/指针事件的最佳方法是什么？我发现它的行为非常令人困惑。我编写了一个脚本，仅设置所有事件处理程序来确定如何触发事件(设置 native 事件处理程序，使用 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)均按预期顺序触发:向下、移动、向上。

但是，当我使用触摸屏时

• 首先触发指针移动，然后指针向下。屏幕上我的手指周围出现一个矩形。
• 当我的手指没有移动时，会触发重复移动事件
• 当我移动手指时不再触发任何事件
• 移开手指时发生pointerend事件

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

Complete script on codepen

Answer 1

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

例如:

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