jQuery 不能“点击”嵌入式 Flash 对象上的 HTML 包装器 div

Question

我一直在尝试按照客户的要求做：一旦客户点击 swf 格式的顶部横幅，就重定向到活动页面，然后重定向到目标页面。

您可以通过http://ausdcf.org查看所做的工作

如果您使用的是 Firefox、Chrome 或 Safari，我怀疑您可以到达目标页面。

但是，如果您使用的是 IE 或 Opera，我对此表示怀疑。

我认为造成这种奇怪问题的原因是：

swf 对象没有指向 url 的链接，所以

我必须像这样破解主题模板文件：

<div id="header">';
            
/*
     * A quick and dirty way to put some swf into PHP, and rotate among them ...
     */ 
             
    //available banners
    $banners = array(
                         'http://localhost/smf/flash/banner_fertalign_1.swf',
                         'http://localhost/smf/flash/banner_fertalign_2.swf',
                         'http://localhost/smf/flash/banner_fertalign_3.swf'
                    );
            
    //get random banner
    srand((double) microtime() * 1000000);
    $rand = rand(0,count($banners)-1);
            
    echo '<div id="top_banner_clickable">';
    echo     '<div id="top_banner_wrapper">';
    echo         '<object width="400" height="60">';
    echo             '<param name="wmode" value="transparent">';
    echo             '<embed wmode="transparent" src="'.$banners[$rand].'" ';
    echo             'width="400" height="60" type="application/x-shockwave-flash"';
    echo             'pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />';
    echo         '</object>';
    echo     '</div>';
    echo '</div>';

而相关的jQuery代码是这样的：

/* master.js */

$(document).ready(function()
{
    $("#top_banner_clickable").click(function()
    {
        window.location ="http://ausdcf.org/campaign/";
    });
});

我对 Flash 或嵌入式对象一无所知。我想这就是这个问题的原因。另外，我不知道为什么它适用于某些浏览器，但不是全部...

我什至尝试将 z-index 添加到 css 中的包装 div 中，如下所示：

#top_banner_clickable
{
    z-index : 100;
}

不，这也不行……

有没有办法解决这个问题？

更新：

我现在正试图说服客户将 Google AdSense 用于此类事情......

非常感谢。

Answer 1

您不能使用 javascript 来捕获 Flash 对象顶部的点击事件。你可以在here和here找到类似的问题。

您可以向您的客户建议修改 Flash 的源代码以处理点击。如果这不可行，则使用容器 flash 对象来托管横幅。

Answer 2

我认为问题在于 Flash 正在吞噬点击事件并防止在文档的其余部分冒泡。或者 Flash 干扰了 jQuery 针对 event propagation 的不一致模型的解决方案。所以我认为要做的事情是添加一个浮动在 Flash 电影上方的 div，但它是兄弟（电影或其父母之一）。像这样的：

echo '<div id="top_banner_clickable">';
echo     '<div id="top_banner_wrapper">';
echo         '<object width="400" height="60">';
echo             '<param name="wmode" value="transparent">';
echo             '<embed wmode="transparent" src="'.$banners[$rand].'" ';
echo             'width="400" height="60" type="application/x-shockwave-flash"';
echo             'pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />';
echo         '</object>';
echo         '<div id="clickableoverlay"></div>'; // float this div above the movie
echo     '</div>';
echo '</div>';

使用 CSS 使 #clickableoverlay 位于影片顶部，然后将您的 click() 应用于该影片。如果<div> 出现在<object> 之后，我认为您不需要在这里使用z-index。小心使用wmode="transparent"（你就是！）或wmode="opaque"。如果您使用wmode="window"，则无论您尝试使用什么 CSS，flash 电影都将始终位于其他所有内容之上。