Windows Phone的IE触摸事件几秒钟后会自动结束

Question

我有一个非常具体的问题。我正在为移动手机编写网页，其中有一个按钮。我在所有浏览器（包括IE）上检测到 touchevent，但在IE上它很特殊。几秒钟后它会自动结束。你能帮我吗？这是我的代码（修改过的，但仍然没有正常工作）：

if (window.navigator.pointerEnabled) {
    tapButton.addEventListener("pointerup", function(e) {
        e.preventDefault();
        addClass(this, 'clicked');
        buttonTouched = true;
    }, false);
    tapButton.addEventListener("pointerdown", function(e) {
        e.preventDefault();
        removeClass(this, 'clicked');
        buttonTouched = false;
    }, false);
    alert("pointerEnabled");
}
else if (window.navigator.msPointerEnabled) {
    tapButton.addEventListener("MSPointerDown", function(e) {
        e.preventDefault();
        addClass(this, 'clicked');
        buttonTouched = true;
    }, false);
    tapButton.addEventListener("MSPointerUp", function(e) {
        e.preventDefault();
        removeClass(this, 'clicked');
        buttonTouched = false;
    }, false);
    alert("mspointerEnabled");
}
else {
    alert("ordinary touch");
    tapButton.addEventListener('touchstart', function(e) {
        e.preventDefault();
        addClass(this, 'clicked');
        buttonTouched = true;
    }, false);
    tapButton.addEventListener('touchend', function(e) {
        e.preventDefault();
        removeClass(this, 'clicked');
        buttonTouched = false;
    }, false);
}

而 HTML 标签中包含了：

-ms-touch-action: none !important;
touch-action: none !important;

但那也没有任何帮助。

- gogachinchaladze

---

你没有说明你看到的是哪个版本的IE浏览器，但我注意到你在检测有供应商前缀的事件之前先检测了没有前缀的事件。根据https://msdn.microsoft.com/en-us/library/windows/apps/dn263112.aspx#document_object_model__dom__improvements上的说明，带前缀的版本已经被废弃，只有在没有无前缀版本可用时才应使用它们。也许重新排列顺序会有所帮助。带前缀的版本将在某个时候完全停止工作。 - Lance Leonard

我试图修复供应商前缀的问题，但没有帮助:( 我只有一个没有前缀的，它的表现也一样:( 有其他建议吗？ - gogachinchaladze

在Win8手机上，显示按钮约1秒钟后，我收到了这条消息“抱歉，您无法从智能手机中倒出啤酒”，我该如何调试？ - Cliff Burton

这意味着您的智能手机不支持window.ondevicemotion或没有陀螺仪。 - gogachinchaladze

对不起，我认为您可能有一些背景问题，因为我的手机具有工作陀螺仪并支持window.ondevicemotion。从在Chrome中打开的页面连接电话会给我带来同样的消息，但是当我倾斜手机时啤酒杯正在移动（在IE中不是）。 - Cliff Burton

Answer 1

我怀疑你遇到了多点触控问题...

请记住，触摸事件和鼠标事件不同。您可以用多个手指触摸。如果您用一只手指接触，然后再加上第二只手指会发生什么？您会得到两个连续的 touchstart 事件。touchend 可能也是如此。我怀疑用户 light 是对的，可能错误地触发了手指释放操作...

请查看您在侦听器中获得的 TouchEvent 的 touches、changedTouches 和 targetTouches 属性发生了什么。我强烈怀疑您会发现还有一个'手指'没有离开屏幕...所以它从2点触摸变成了1点触摸...

确保（不再）触摸的手指实际上是在按钮上等等的手指，要比旧的 mouseup 和 mousedown 事件复杂得多。

编辑：我意识到你的问题与IE和它的指针事件有关...然而，它们基本上是相同的，因为它们也支持多点触控（因此可能会遇到相同的问题）。我没有看到类似于touches的属性，但我确实看到了pointerId，它可以给你相同的信息（以一些在你这边的记账成本为代价）。

这个MSDN页面有一些好的信息。特别是这段代码片段我认为很有启发性：

function pointerdownHandler(evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

这似乎证实，当手指触碰表面时，接触点会获得一个ID，该ID用于通知您在接收pointerup事件时哪个手指离开了表面。

我建议添加一些记录，只需在pointerdown和pointerup上打印pointerId，我敢打赌你很快就会找到解决方案。

- Stijn de Witt