2010-07-21 3 views
7

Окружающая среда: Windows 7, Internet Explorer 8, флэш ActiveX 10.1.53.64, = прозрачный режим окнасобытие не пузырится в некоторых браузерах при нажатии на флэш

Просто написал небольшую тестовую страницу, которую можно загрузить в IE и Firefox или любой другой браузер.

<!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> 

Так нажав любую цветную форму следует производить оповещение (для зеленной в IE, не уверен, за исключением того, почему, но я надеюсь, что это не по теме и не имеет отношения к моей проблеме).

Щелчок по контейнеру Flash в Firefox будет работать отлично. Вы должны получить оповещения в этом порядке, содержащем: span, div и body. Flash выдает событие в HTML. Но это не происходит в IE.

Итак, почему Flash в IE не пузырящие события в HTML?

Редактировать: Как уже упоминалось Энди Э, это поведение можно наблюдать и в Google Chrome, который, насколько мне известно, не использует ActiveX для встраивания флеш-ролика на страницу.

ответ

3

Flash в Internet Explorer - элемент управления ActiveX. Элементы управления ActiveX потребляют события, но не запускают их на элементе объекта, который их размещает. Это означает, что нет события DOM, чтобы пузыриться. FWIW, Google Chrome ведет себя одинаково.

+0

Спасибо за указание на то, что плагин в Google Chrome ведет себя точно так же. –

0

Просто в функции обратного вызова для уведомления о вспышке некоторых типов мышей.
Тогда вы можете пузырь внутренне оттуда.

+1

Решение должно быть чистым решением HTML JavaScript, поскольку вы не всегда контролируете встроенный Flash или Object. –

1

Мое решение этой проблемы состояло в том, чтобы установить абсолютный объект вспышки и поместить на него элемент размера равный по размеру, который ловит щелчок мыши.

<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> 

Без (прозрачного) фона изображения наложения это не сработает.

2

Мы довольно много боролись с этой проблемой и, наконец, пришли к простому решению.

Когда клик происходит над встраиванием, вы можете скрыть вставку, а затем запустить событие click. Для chrome этот код основывается на элементе-оболочке для флеш-ролика, который захватывает щелчок, дает этому элементу-оболочкой класс «enableclickthrough» - вот какой код jquery, который выполняет это:

Редактировать: обновлено это для моих собственных нужд так что код является более селективным о том, что фильмы вспышки можно перешедших - теперь его только те, которые имеют класс enableclickthrough или являются потомком элемента с этим классом

// 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; 
     } 
    }); 
}); 

Вот пример вспышки фильм с оберточным элементом, чтобы это нормально функционировало в хромированном

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

Имейте в виду, что это решение предназначено для флеш-роликов, в которых нет интерактивных компонентов.

Я надеюсь, что это поможет другим, у кого есть эта проблема с флэш-фильмами.

С наилучшими пожеланиями

Will Феррер

Смежные вопросы