javascript - touchend - En el evento IE Touchstart de Windows Phone finaliza automáticamente después de unos segundos

touchmove jquery

Question

Tengo un problema muy específico. Estoy escribiendo una página web para teléfonos móviles que tiene un botón. Estoy detectando touchevent en todos los navegadores, incluido IE, pero en IE es bastante específico. Después de unos segundos, termina automáticamente. ¿Puedes ayudarme de alguna manera? Aquí está mi código (modificado, pero aún no funciona correctamente):

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);
}

Y la etiqueta html tiene en ella:

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

pero eso tampoco ayuda.

Answer 1

Sospecho que te encuentras con un problema multitáctil ...

Recuerde, los eventos táctiles no son lo mismo que los eventos del mouse. Puedes tocar con más de un dedo. ¿Qué sucede si tocas con un dedo antes de agregar un segundo dedo? touchstart dos eventos touchstart consecutivos. Lo mismo es probablemente cierto para touchend . Sospecho que la light usuario es correcta, que probablemente desencadene una liberación de dedo incorrectamente ...

Por favor, eche un vistazo a lo que está sucediendo con los touches , las changedTouches y targetTouches propiedades de touches changedTouches targetTouches TouchEvent que recibe en su oyente. Sospecho fuertemente que verás que todavía queda un ''dedo'' tocando ... Así que pasó de 2 toques a 1 ...

Asegurarse de que el dedo (que ya no sea) que toca, sea el que está en el botón, etc., es mucho menos simple que los buenos viejos eventos de mouseup y mousedown .

EDITAR: me doy cuenta de que su problema es con IE y sus eventos de puntero ... Sin embargo, funcionan casi igual ya que también admiten multi-touch (y por lo tanto podrían sufrir los mismos problemas). No veo una propiedad similar a touches , pero sí veo un pointerId , que puede proporcionarle la misma información (a cambio de una contabilidad en su extremo).

Esta página de MSDN tiene buena información. Especialmente este fragmento de código es esclarecedor, creo:

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

Esto parece confirmar que, cuando un dedo toca la superficie, el punto de contacto obtiene una ID, que se usa para informarle qué dedo salió de la superficie cuando recibe el evento de pointerup .

pointerId algunos registros que solo imprimen el pointerId en el pointerdown y el pointerup y apostaría a que encontrarán rápidamente su solución.