指針事件IE11 / Surface

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）均按預期順序觸發：向下，移動，向上。

但是，當我使用手機屏幕時

• 首先，一個指針移動觸發，然后向下指針移動。 在屏幕上，我的手指周圍出現一個矩形。
• 反復移動事件在不動手指的情況下觸發
• 我動動手指時不會觸發其他事件
• 移開手指時的pointerend事件

我究竟做錯了什么？ 調用preventDefault，stopPropagation或stopImmediatePropagation不會更改此行為。 設置css 指針事件：無； 禁用所有事件。

在Codepen上完成腳本

Answer 1

您需要使用touch-action CSS屬性來防止用戶用手指或手寫筆在屏幕上拖動時瀏覽器的平移和縮放行為。

例如：

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

Answer 2

試試我的觸摸手勢抽象庫DeepTissue 。 IE的觸摸模型非常簡單，因為指針事件將所有輸入模式抽象為一個通用API。 Chrome使事情變得復雜，但這是另一個故事:)。

您確實不想參與所有事件。 我知道那會令人困惑。 這就是為什么我寫《 Deeptissue》。 它使您不必編寫所有管道代碼，並選擇最佳選項並掛接到該事件集。