Windows Phone的IE Touchstart事件在几秒钟后自动结束

我有一个非常具体的问题。 我正在写一个手机的网页，上面有一个button。 我在包括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; 

但是这也没有帮助。

Answer 1

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

请记住，触摸事件与鼠标事件不同。 你可以触摸多个手指。 如果你用一根手指触摸而不是添加另一只手指会发生什么？ 你会得到两个连续的touchstart事件。 对于touchend来说也是touchend 。 我怀疑用户的light是正确的，它可能会触发手指释放不正确…

请看看touches事件发生了什么， TouchEvent的touches和targetTouches属性改变了。 我强烈怀疑你会看到还有一个“手指”左触摸…所以它从2触到1 …

确保（不再）触摸的手指实际上是button上的那个等等，比起那些老式的mousedown和事件来说简单得多。

编辑：我意识到你的问题是与IE浏览器，它是指针事件…但是，他们的工作大都是相同的，他们也支持多点触摸（因此可能遭受同样的问题）。 我没有看到类似touches的属性，但我确实看到了一个pointerId ，它可以给你相同的信息（以一些簿记为代价）。

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

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

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

我会添加一些logging，只是在pointerdown和pointerup上打印pointerup ，我敢打赌你会很快find你的解决scheme。