mouseout no se dispara cuando el elemento está cubierto por otro elemento

Recientemente descubrí un comportamiento extraño con el evento mouseout en javascript. Por favor, mira mi violín: http://jsfiddle.net/Uf3xQ/25/

Cuando sobre el button, se mouseenter evento mouseenter . Cuando dejo el button, se mouseout evento mouseout . Hasta aquí todo bien.

Ahora, cuando cierro, haga clic y el evento click muestra un div que se coloca sobre el button, el evento mouseout también se disparará.

Pero cuando el div se muestra después de un breve retraso usando setTimeout por ejemplo, el evento mouseout no se disparará hasta que mueva el mouse.

¿Puedes explicarme este comportamiento?

ACTUALIZACIÓN: Envié el error al cromo y lo confirmaron. Vea aquí: http://code.google.com/p/chromium/issues/detail?id=159389

El error también ocurre en Opera, Safari (WebKit en común) e IE

5 Solutions collect form web for “mouseout no se dispara cuando el elemento está cubierto por otro elemento”

Busqué WebKit bugzilla y https://bugs.webkit.org/show_bug.cgi?id=4117 parece ser su error, debe agregar un nuevo comentario al error con un enlace a su caso de testing, ya que los files de testing vinculados en el error parece estar perdido (error 404).

Intenta usar delegar en la superposition para upload el evento.
EDITAR Fiddle está siendo lento hoy y el violín que había publicado originalmente no tenía el código cortado que yo usaba.

esto SÍ trabaja en el violín con la versión jQuery (1.8.2) del enlace seleccionado para la bifurcación jsBIN: http://jsbin.com/ugeniq/3/edit

EDITAR 2 Me di count de que el mouse / over / out sin el div no funcionaba. Actualicé el código así que ahora funciona con y sin la superposition div.

 var fail = true; var button = document.getElementById("button"); var overlay = document.getElementById("overlay"); var log = document.getElementById("log"); button.addEventListener('click', function() { if (fail) { // mouseout won't be finetworking until you move the mouse window.setTimeout(function() { overlay.style.display = 'block'; }, 0); } else { // mouseout event is finetworking instantly overlay.style.display = 'block'; } log.innerHTML += 'over' + "<br>"; }, false); button.addEventListener('mouseover', function() { log.innerHTML += 'over' + "<br>"; }, false); button.addEventListener('mouseout', function() { log.innerHTML += 'out' + "<br>"; }, false); $(overlay).delegate(button, 'mouseover', function() { log.innerHTML += 'over' + "<br>"; }); $(overlay).delegate(button, 'mouseout', function() { log.innerHTML += 'out' + "<br>"; }); 

Parece ser un error oscuro del browser (en Chrome ). Firefox parece estar funcionando bien. No estoy seguro acerca de otros browseres.

Reemplacé todo con js nativo, para hacerlo más claro:

http://jsfiddle.net/qLCY3/4/

La mejor manera de resolver este problema es ajustar el button y la superposition, cambiar el mouseover y mouseleave a este contenedor.

// HTML

 <div class="helper"> <div class="overlay"></div> <button class="button">Foo</button> </div> 

// JS

 var fail = true; $$('.helper').addEvent('mouseover', function() { console.log('over'); }); $$('.helper').addEvent('mouseleave', function() { console.log('out'); }); $$('.button').addEvent('click', function() { if(fail) { // mouseout won't be finetworking until you move the mouse window.setTimeout(function() { $$('.overlay').setStyle('display','block'); }, 0); } else { // mouseout event is finetworking instantly $$('.overlay').setStyle('display','block'); } }); 

simplemente elimine el evento de la superposition y haga que se desvanezca o lo que quiera que haga. Lo hice Alerta en tu violín. Pruébalo.

  $$('.button').addEvent('mouseover', function() { console.log('over'); 

});

  $$('.overlay').addEvent('mouseout', function() { alert("ee"); 

});

  • ¿Hay alguna forma de determinar si la window del browser estaba cerrada?
  • twitter bootstrap typeahead no se puede agregar al elemento creado dinámicamente
  • Javascript: Adjunte el Escuchador de events al Arreglo para el evento Push ()
  • Cambio de input de CasperJS Activación de evento
  • Evento drop de HTML5 no funciona a less que se maneje dragover
  • ¿Por qué escribir en un área de text en Firefox hace que la pantalla se desplace?
  • Función de llamada cuando el sonido ha terminado
  • ¿Usando JavaScript o jQuery cómo verificar si el evento existe en la window?
  • ¿Texto en el campo HTML para desaparecer cuando se hace clic?
  • Observando el cambio en la selección del button de opción usando Prototype JS
  • Raphael.js, ¿cómo seleccionar un elemento?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.