Quiero cambiar el color de un enlace a naranja al pasar el hover sobre él.
En un dispositivo móvil, cuando el usuario toca el enlace, se vuelve naranja y permanecerá naranja hasta que el usuario haga clic. Entonces, quiero activar manualmente el evento mouseout para que el enlace pierda su efecto de desplazamiento después de 1 segundo.
Esto es lo que he intentado, pero el enlace permanece naranja después de 1 segundo:
$(window).on('load', function() { $('a').on('click', function() { // on a mobile device, I want the hover effect to end after 1 seconds window.setTimeout(function() { $('a').trigger('mouseout'); }, 1000); }); }); a { font-size: 2rem; } a:hover { color: orange; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <a href='#'>Test</a> </div> Nota: este es un ejemplo simplificado, en mi código no estoy usando un temporizador, sino que quiero activar el evento mouseout en ajaxcomplete
$(document).on('ajaxComplete', function () { $('a').trigger('mouseout'); }); a { font-size: 2rem; } a:hover { color: myanimation 1s 1; -webkit-animation:myanimation 1s 1; } @keyframes myanimation { 0% {color:orange;} 100% {color:orange;} } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <a href='#'>Test</a> </div>Esto se puede resolver a través de una animación CSS, vea el fragmento de código anterior.
El problema es que tratar de forzar un evento de mouseout no parece funcionar en un dispositivo táctil.
La serie de eventos que se activa en un dispositivo táctil comienza con un evento de inicio táctil; consulte, por ejemplo, MDN
Si el navegador activa eventos táctiles y del mouse debido a una sola entrada del usuario, el navegador debe activar un inicio táctil antes de cualquier evento del mouse.
Este fragmento recuerda que el usuario ha iniciado un evento táctil y, en lugar de actuar sobre los eventos del mouse, establece una clase que cambia el color del texto. Lo mismo se hace con los eventos del mouse, que solo se activan cuando el usuario no parece estar usando un dispositivo táctil en este elemento.
Si bien parecería lógico buscar posteriormente el evento touchend en el elemento, parece que si el usuario hace un toque prolongado sobre él, dado que es un elemento de anclaje, el evento touchend no se activa en el elemento cuando retira el dedo. /dispositivo señalador. Sin embargo, todavía se activa en la ventana, por lo que capturamos ese evento y eliminamos la clase flotante.
let usingTouch = false; const a = document.querySelector('a'); a.addEventListener('touchstart', function() { usingTouch = true; a.classList.add('hover'); }); window.addEventListener('touchend', function() { usingTouch = true; setTimeout(function() { a.classList.remove('hover'); }, 1000); }); a.addEventListener('mouseover', function() { if (!usingTouch) a.classList.add('hover'); }); a.addEventListener('mouseout', function() { if (!usingTouch) a.classList.remove('hover'); }); a { font-size: 2rem; } .hover { color: orange; } <div> <a href='#'>Test</a> </div>