Событие не всплывает в некоторых браузерах при нажатии на Flash - PullRequest
7 голосов
/ 21 июля 2010

Окружающая среда: Windows 7, Internet Explorer 8, Flash ActiveX 10.1.53.64, Режим окна = прозрачный * * +1001

Только что написал небольшую тестовую страницу, которую можно загрузить в 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. Вспышка пузыряет событие в HTML. Но это не происходит в IE.

Так почему же Flash в IE не передает события в HTML?

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

Ответы [ 4 ]

3 голосов
/ 21 ноября 2012

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

Когда по врезке происходит щелчок, вы можете скрыть его, а затем повторно вызвать событие щелчка. Для 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;
        }
    });
});

Вот пример флеш-ролика с элементом-обёрткой, который позволяет правильно функционировать в chrome

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

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

Надеюсь, это поможет другим, у которых возникли проблемы с флэш-фильмами.

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

Уилл Феррер

3 голосов
/ 21 июля 2010

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

1 голос
/ 08 марта 2012

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

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

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

0 голосов
/ 06 января 2011

Просто с помощью функции обратного вызова, чтобы уведомить флэш-память об определенных типах событий мыши.
Затем вы можете всплывать внутри.

...