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

gog*_*dze 39 javascript internet-explorer windows-phone touchstart

我有一个非常具体的问题.我正在为手机写一个网页,上面有一个按钮.我正在检测touchevent包括IE在内的每个浏览器,但在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);
}
Run Code Online (Sandbox Code Playgroud)

并且html标签中包含:

-ms-touch-action: none !important;
touch-action: none !important;
Run Code Online (Sandbox Code Playgroud)

但这也无济于事.

Sti*_*itt 1

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

请记住,触摸事件与鼠标事件不同。您可以用多个手指进行触摸。如果用一根手指触摸而不是添加第二根手指会发生什么?您将获得两个连续touchstart事件。对于 来说可能也是如此touchend。我怀疑用户light是对的,它可能错误地触发了手指释放......

请查看您在侦听器中获得的TouchEvent 的toucheschangedTouchestargetTouches属性发生了什么情况。我强烈怀疑你会看到仍然有一个“手指”在触摸......所以它从 2 次触摸变成了 1 次......

确保(不再)触摸的手指实际上是按钮上的手指等,这比旧的mouseupmousedown事件要简单得多。

编辑:我意识到你的问题是 IE 和它的指针事件...但是它们的工作原理基本相同,因为它们也支持多点触控(因此可能会遇到相同的问题)。我没有看到类似于 的属性touches,但我确实看到了pointerId,它可以为您提供相同的信息(但需要您进行一些簿记)。

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

function pointerdownHandler(evt) {
      evt.target.setPointerCapture(evt.pointerId);
}
Run Code Online (Sandbox Code Playgroud)

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

我会添加一些仅打印pointerIdon 的pointerdown日志记录pointerup,我敢打赌您会很快找到解决方案。