Tengo un elemento (const catchMe = document.getElementById("catchMe") que "se escapa" del mouse, lo hace llamando a una función de "mover" catchMe.addEventListener('mouseenter', move) que simplemente establece su css style.top, etc. en puntos aleatorios de la página (la 'ejecución' también se realiza a través de la transición css).
Lo que estoy tratando de hacer es hacer que el elemento catchMe vuelva a su posición original unos segundos después de mounseleave , por lo que agregué un eventListener catchMe.addEventListener('mouseleave',startPosition) que reescribe su CSS original pero tiene un setTimeout en eso. Pero el problema es que si hago mouseEnter nuevamente, no esperará unos segundos hasta que llame a startPosition , ya que el mouseLeave anterior todavía está activo,
Entonces, la pregunta es, ¿hay alguna manera de cancelar el 'antiguo' mouseLeave en un nuevo mouseEnter? ¿O hay una manera más fácil de hacer esto en general?
estoy usando javascript simple
const catchMe = document.getElementById('catchme'); let timeout; catchMe.addEventListener('mouseenter', function(event){ clearTimeout(timeout); this.style.backgroundColor = '#fff'; }); catchMe.addEventListener('mouseleave', function(event){ timeout = setTimeout(() => { this.style.backgroundColor = '#888'; }, 1000); }); #catchme { background-color: #888; } <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <button id='catchme'>Catch me</button> </body> </html> ¿Quizás te refieres a esto? Puse clearTimeout() en mouseenter
La mejor opción que podría sugerirte es retransmitir las clases de CSS.
Ejemplo :
CSS
#catchMe{ position: absolute; } .Move{ top:20px; } .startPosition{ top:0px; }JavaScript
catchMe.addEventListener('mouseenter', () => { catchMe.classList.add('Move'); catchMe.classList.remove('startPosition'); }) catchMe.addEventListener('mouseleave', () => { catchMe.classList.remove('Move'); catchMe.classList.add('startPosition'); })Espero que este método pueda ayudarte.