El evento touchstart ocurre cuando el usuario toca un elemento. Pero un evento de clic se activa cuando el usuario hace clic en un elemento.
Por lo general, los eventos de inicio táctil y clic se activan en el mismo clic en los dispositivos habilitados para tocar y hacer clic. Entonces, en este caso, si el navegador activa eventos táctiles y de mouse debido a la entrada de un solo usuario, el navegador debe activar un inicio táctil antes de cualquier evento de mouse.
Hay dos formas populares de resolver este problema.
- Uso del método preventDefault() o stopPropagation().
- Uso de una variable para comprobar si se trata de un evento de «inicio táctil» o de «clic».
Uso del método preventDefault() o stopPropagation() : este método evita que el controlador de eventos responda a los eventos touchstart y clicks. Si una aplicación no desea que se activen eventos de mouse en un elemento de destino táctil específico, los controladores de eventos táctiles del elemento deben llamar a preventDefault() o stopPropagation() y no se enviarán eventos de mouse adicionales.
Ejemplo:
HTML
<html>
<head>
<title>Touchstart</title>
</head>
<body>
<h1>TouchStart and Click event</h1>
<button id="button">click me</button>
<script>
// button element
var button1 = document.querySelector("button");
// touchstart handler
button1.addEventListener("touchStart", onlyTouch, false);
function onlyTouch(ev) {
// Call preventDefault() to prevent any further handling
console.log("Here a touchstart event is triggered");
ev.preventDefault();
}
// click event handler
button1.addEventListener("click", onlyClick, false);
function onlyClick(ev) {
// Call preventDefault() to prevent any further handling
console.log("Here a click event is triggered");
ev.preventDefault();
console.log("After triggering an event");
}
</script>
</body>
</html>
Salida cuando se dispara un evento de inicio táctil
Here a touchstart event is triggered After triggering an event
Sin embargo, esto también evita otros comportamientos predeterminados del navegador (como el desplazamiento), aunque generalmente maneja el evento táctil por completo en su controlador y debe deshabilitar las acciones predeterminadas.
Además, cuando un usuario toca un elemento en una página web en un dispositivo móvil, las páginas que no han sido diseñadas para la interacción móvil tienen un retraso de al menos 300 milisegundos entre el evento de inicio táctil y el procesamiento de los eventos del mouse (mouse down). Por lo tanto, se debe agregar una línea de código HTML que represente que la página no necesita zoom.
<meta name="viewport" content="width=device-width, user-scalable=no">
Usar una variable para comprobar si se trata de un evento de “inicio táctil” o de “clic”:
Ejemplo:
HTML
<html>
<head>
<title>Touchstart</title>
</head>
<body>
<h1>TouchStart and Click event</h1>
<button id="button">click me</button>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$("#button").on('touchstart click', function(event) {
if (event.type == "touchstart") {
$(this).off('click');
console.log("Only touch event is fired");
} else if (event.type == "click") {
$(this).off('touchstart');
console.log("Only click event is fired");
}
});
</script>
</body>
</html>
Producción:
click event is triggered After triggering an event
Publicación traducida automáticamente
Artículo escrito por sathiyajith19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA