javascript - ontouchstart - touchend
El evento Touchstart nunca se activa en Android Chrome la primera vez que se carga la página (6)
En Android Chrome, cuando crea una nueva pestaña y accede a una página con el contenido a continuación, sus toques para #touch div nunca han activado eventos de inicio de toque. Una vez que recargas la página, puedes activar el evento.
¿Por qué? y ¿cómo puedo evitar esta situación?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>touch start on Android</title>
<style type="text/css">
#touch, #click {
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
border: solid 1px black;
}
</style>
</head>
<body>
<div id="touch">Touch</div>
<div id="click">Click</div>
<script type="text/javascript">
document.getElementById(''touch'').addEventListener(''touchstart'', function () { alert (''touch''); } , false);
document.getElementById(''click'').addEventListener(''click'', function () { alert(''click''); } , false);
</script>
</body>
</html>
Mi entorno es
- Nexus 7 (2013)
- Número de compilación de Android 4.30 JSS15Q
- Chrome 29.0.1547.72 (versión de WebKit 537.36 (@ 156722), versión de JavaScript V8 3.19.18.21)
¿Tal vez intente retrasar la adición de los escuchas del evento hasta que el DOM esté listo?
<script>
function touchTest() {
document.getElementById(''touch'').addEventListener(''touchstart'', function () { alert (''touch''); } , false);
document.getElementById(''click'').addEventListener(''click'', function () { alert(''click''); } , false);
}
document.addEventListener(''DOMContentLoaded'', touchTest);
</script>
¿El hecho de que su código funcione en una recarga podría indicar que los detectores de eventos se están agregando demasiado rápido en la primera carga de la página?
Hay algunos errores extraños con eventos táctiles en versiones anteriores de WebKit. Eche un vistazo a estos informes de errores: 5491 , 19827 , 4549 , 150779 .
El truco es agregar e.preventDefault() en el controlador de eventos touchstart . Esto es necesario debido a la forma en que el navegador maneja el desplazamiento nativo.
android-swipe-shim ofrece otra solución y más información:
En algunos dispositivos Android, cuando el usuario toca la pantalla, se dispara un evento de inicio táctil, Android pasa el evento a WebView (javascript) para ser manejado. Si WebView no evita la falla (dentro de 200 ms), Android reanuda el desplazamiento nativo y deja de pasar eventos táctiles a WebView.
La solución a esto ha sido principalmente prevenir preventDefault en touchstart y desplazarse manualmente usando javascript.
Este comportamiento está integrado en millones de dispositivos Android y no se puede corregir en su origen.
Este shim proporciona una solución mediante la superposición de un elemento contenido que se puede desplazar de forma nativa y dispara eventos de deslizamiento basados en sus desplazamientos de desplazamiento, lo que permite que su software maneje eventos de movimiento con el desplazamiento nativo habilitado.
Sí, yo también lo he solucionado agregando un evento de movimiento táctil al documento. Agregue el siguiente código a su archivo JS. Esto debería funcionar.
document.addEventListener("touchmove",function(){})
Sus marcas html y js parecen funcionar bien. Debería verificar si el elemento necesita manejo "touchstart" en sus marcas reales tiene el atributo "título". Esta podría ser una razón que hace que no se dispare al primer toque.
Supongo que es algo que ver con tu versión de Chrome. Su código funciona bien, también en la primera carga, en Chrome Dev 58.0.3007.3 (Android 7.1.1 build NMF26F)
Pruebe esta modificación del código, agrega los oyentes después de que se haya cargado el cuerpo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>touch start on Android</title>
<style type="text/css">
#touch, #click {
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
border: solid 1px black;
}
</style>
<script type="text/javascript">
function startListening() {
document.getElementById("touch").addEventListener("touchstart", function() {alert("touch");}, false);
document.getElementById("click").addEventListener("click", function() {alert("click");}, false);
}
</script>
</head>
<body onload="startListening()">
<div id="touch">Touch</div>
<div id="click">Click</div>
</body>
</html>
$(document).ready(function(){
document.getElementById(''touch'').addEventListener(''touchstart'', function () { alert (''touch''); } , false);
document.getElementById(''click'').addEventListener(''click'', function () { alert(''click''); } , false);
});
Prueba esto. Cuando se cargue la página, javascript ejecutará tu código. Esta es la solución Jquery de su problema (si funciona). Si no desea utilizar jquery, puede encontrar una forma equivalente de javascript de
$ (documento) .ready