Evento no burbujeo en algunos navegadores cuando se hace clic en flash

Medio Ambiente: Windows 7, Internet Explorer 8, ActiveX de Flash 10.1.53.64, wmode = transparenteEvento no burbujeo en algunos navegadores cuando se hace clic en flash

acabo de escribir una página pequeña prueba que se puede cargar en IE y Firefox o cualquier otro navegador.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Event bubbling test</title> 
    </head> 
    <body onclick="alert('body');" style="margin:0;border-width:0;padding:0;background-color:#00FF00;"> 
    <div onclick="alert('div');" style="margin:0;border-width:0;padding:0;background-color:#FF0000;"> 
     <span onclick="alert('span');" style="margin:0;border-width:0;padding:0;background-color:#0000FF;"> 
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="159" height="91" id="flashAbout_small" align="absmiddle"> 
      <param name="movie" value="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf"/> 
      <param name="quality" value="high"/> 
      <param name="bgcolor" value="#FFFFFF"/> 
      <param name="wmode" value="transparent"/> 
      <embed src="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf" quality="high" bgcolor="#FFFFFF" width="159" height="91" wmode="transparent" name="flashAbout_small" align="absmiddle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"/> 
     </object> 
     </span> 
    </div> 
    </body> 
</html>

Así clic en cualquier forma coloreada debe producir una alerta (excepto para el verde en el IE, no sé por qué, pero espero que sea fuera de tema y no relacionado con mi problema).

Al hacer clic en el contenedor de Flash en Firefox funcionará perfectamente bien. Debería obtener recuadros de alerta en este orden que contengan: span, div y body. El flash burbujea el evento al HTML. Pero esto no está sucediendo en IE.

¿Por qué Flash en IE no está burbujeando eventos a HTML?

Editar: Según lo mencionado por Andy E este comportamiento también se puede ver en Google Chrome que, a mi conocimiento, no está utilizando ActiveX para incrustar la película flash en la página.

Fuente

2010-07-21 166_MMX

Flash en Internet Explorer es un control ActiveX: los controles ActiveX consumen eventos pero no los activan en el elemento de objeto que los aloja. Esto significa que no hay un evento DOM que brote. FWIW, Google Chrome se comporta de la misma manera.

Fuente

2010-07-21 16:44:23

Gracias por señalar que el plug-in de Google Chrome se comporta de la misma manera. –

Simplemente en una función de devolución de llamada para notificar el destello de ciertos tipos de eventos de mouse.
Luego puede hacer burbujas internas desde allí.

Fuente

2011-01-06 20:53:15 Daver

La solución debe ser una solución de JavaScript HTML pura, ya que no siempre tiene el control del Flash u Objeto que está incrustado. –

Mi solución a este problema fue posicionar el objeto flash absoluto y colocar un elemento span del mismo tamaño sobre el que captura el clic del mouse.

<span style="display:block;position:absolute;z-Index:2; background:url(/img/x.gif) repeat;width: 159px; height: 91px;"></span> 
<object style="position:absolute;z-Index:1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="159" height="91" id="flashAbout_small" align="absmiddle"> 
      <param name="movie" value="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf"/> 
      <param name="quality" value="high"/> 
      <param name="bgcolor" value="#FFFFFF"/> 
      <param name="wmode" value="transparent"/> 
      <embed src="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf" quality="high" bgcolor="#FFFFFF" width="159" height="91" wmode="transparent" name="flashAbout_small" align="absmiddle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"/> 
</object>

Sin la imagen de fondo (transparente) de la superposición esto no funcionaría.

Fuente

2012-03-08 08:50:46

Luchamos un poco con este problema y finalmente llegamos a una solución simple.

Cuando ocurre un clic sobre una inserción, puede ocultar la inserción y luego volver a activar el evento de clic. Para Chrome este código se basa en un elemento contenedor para la película flash que captura el clic, dale a este elemento contenedor la clase "enableclickthrough" - aquí hay un código jquery que logra esto:

Editar: esto se actualizó para mis propias necesidades por lo que el código es más selectivo sobre qué películas flash se puede hacer clic a través de - ahora los únicos que tienen una clase de enableclickthrough o que son el hijo de un elemento con esa clase

// When a mouse up occurs on an embed or a holder element taged with class enableclickthrough, then hide the element and refire the click 
$(document).ready(function(){ 
    $('body').mouseup(function (event) { 
     var offset = $(this).offset(), 
      clientX = event.clientX, 
      clientY = event.clientY, 
      left = offset.left, 
      top = offset.top, 
      x = clientX - left, 
      y = clientY - top, 
      target = $(event.target), 
      display = $(target).css('display'), 
      passClickTo; 

     if (typeof clientX != 'undefined' && (target.parent().hasClass('enableclickthrough') || target.hasClass('enableclickthrough'))) { 
      target.css('display', 'none'); 
      // If you don't pull it out of the array for some reason it doesn't work in all instances 
      passClickTo = $(document.elementFromPoint(x, y)); 
      passClickTo[0].click(); 
      target.css('display', display); 
      return false; 
     } 
    }); 
});

Aquí está un ejemplo de un flash película con un elemento de envoltura para permitir que esto funcione correctamente en cromo

<div class="enableclickthrough"> 
    <script type="text/javascript"> 
    AC_FL_RunContent([params_for_your_flashmovie_here]); 
    </script> 
</div>

Tenga en cuenta que esta solución es para películas flash que no tienen componentes interactivos.

Espero que esto ayude a otros que tengan este problema con las películas flash.

Saludos

Will Ferrer

Fuente

2012-11-21 04:09:10

Evento no burbujeo en algunos navegadores cuando se hace clic en flash

Respuesta

Cuestiones relacionadas