指针事件 IE11/Surface

Posted 2023-02-24

【中文标题】指针事件 IE11/Surface

【英文标题】：Pointer Events IE11/ Surface

【发布时间】：2014-10-06 14:11:33

【问题描述】：

在 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）都按预期的顺序触发：向下、移动、向上。

但是，当我使用触摸屏时

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

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

Complete script on codepen

【参考方案1】：

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

例如：

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

【讨论】：

哼，这只是禁用所有事件。不是我想要的。

【参考方案2】：

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

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

【讨论】：

谢谢，我去看看。

给我任何反馈！