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"); 

});

  • ¿Cuál es el primer evento disparado cuando se carga una página web en el browser?
  • ¿Cómo disparar un evento sobre el cambio de class usando jQuery?
  • JavaScript click el detector de events en la class
  • Graba y reproduce javascript
  • funciona como un parámetro para otra function en JS?
  • Abra la window "Inspeccionar elemento" a través de JS
  • ¿Cómo depurar los enlaces de eventos JavaScript / jQuery con Firebug o herramientas similares?
  • Evento 'onmousedrag' js
  • la function de clic no funciona en la class div creada sobre la marcha
  • var a = function () vs function a () para event listener?
  • Simular un clic en la label 'a' en Chrome
  • cómo detener el efecto de desplazamiento para el button en el modo de desactivación
  • onfocus no se llama cuando se usa el atributo de enfoque automático en una label de input
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.