Tengo un problema muy especifico. Estoy escribiendo una página web para teléfonos móviles que tiene un botón. touchevent en todos los navegadores, incluido IE, pero en IE es bastante específico. Después de unos segundos, finaliza 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.
Sospecho que te estás encontrando 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 y agregas un segundo dedo? Obtiene dos eventos touchstart consecutivos. Lo mismo es probablemente cierto para touchend . Sospecho que la light usuario tiene razón en que probablemente esté activando la liberación de un dedo incorrectamente...
Eche un vistazo a lo que está sucediendo con las propiedades touches , changedTouches y targetTouches del TouchEvent que obtiene en su oyente. Sospecho firmemente que verá que todavía queda un 'dedo' tocando... Así que pasó de 2 toques a 1...
Asegurarse de que el dedo que toca (ya no) es en realidad el que está en el botón, etc. es mucho menos simple de lo que eran los viejos eventos mouseup y mousedown .
EDITAR: Me doy cuenta de que su problema es con IE y sus eventos de puntero ... Sin embargo, funcionan casi igual en el sentido de que también admiten multitáctil (y, por lo tanto, podrían sufrir los mismos problemas). No veo una propiedad similar a touches , pero sí veo un pointerId , que puede brindarle la misma información (a costa de un poco de contabilidad por su parte).
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 golpea la superficie, el punto de contacto obtiene una identificación, que se usa para informarle qué dedo salió de la superficie cuando recibe el evento de pointerup .
Agregaría un registro que solo imprima el pointerId en pointerdown y pointerup y apuesto a que encontrará rápidamente su solución.