Javascript 如何用链接包装一个元素来覆盖它？

我有两个元素要包装并取消它们的事件。一个是iframe，另一个是对象

   <a href="http://google.com">
<iframe src="http://pldaflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
</a>


     <a href="http://google.com">
<object height="400" width="500"><param name="allowfullscreen" value="false">
<param name="AllowScriptAccess" value="always">
<param name="movie" value="http://embed.rede.com/player/">
<param name="FlashVars" value="id=97219&&autostart=false">
<embed src="http://embed.rube" allowfullscreen="false" AllowScriptAccess="always"
flashvars="autostart=false" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" 
type="application/x-shockwave-flash" height="400" width="500" /></object>

</a>

我想用html或css覆盖它们的事件，而不是使用JavaScript。。但是javascript选项也是一个选项

如何用链接的事件覆盖对象的事件和iframe

更新：

我想这样做：

        <div id="wrapper" style="position:relative;">
        <a href="http://google.com">
        <div style="position:absolute; width:100%; height: 100%; z-index: 9999; background-color:blue;">
            <div style="position:absolute; width:100%; height: 100%; z-index: 0;">
                <iframe src="http://playflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
            </div>
            </a>
        </div>
    </div>

将iframe的div置于链接div的下方

不起作用。。但我认为解决办法应该是这样

另一种方法是使用javascript禁用对div的单击

更新：

我需要一个简单的解决方案。解决方案是将div置于iframe之上，假设jQuery：

$("iframe").click(function(){
   window.location = <yourDesiredHref>;
});

$（“iframe”）。单击（函数（）{
window.location=；
});

---

这同样适用于对象。

您可以将链接放在对象之前，并给它一个绝对位置，从而使链接覆盖对象。例如，请参见fiddle：

重要的是：

<div class="container">
    <a id="overlay" href="http://google.com"></a>
    <iframe src="http://www.example.com" width="500" height="415" frameborder="0"></iframe>
</div>

---

使用html/css，您可以尝试以下方法：

        <div id="wrapper" style="position:relative;">
        <a href="http://google.com">
        <div style="position:absolute; width:100%; height: 100%; z-index: 9999; background-color:blue;">
            <div style="position:absolute; width:100%; height: 100%; z-index: 0;">
                <iframe src="http://playflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
            </div>
            </a>
        </div>
    </div>

• 在对象下方创建一个空div“overlay”
• 使其与iframe和object的组合一样高（如果不使用任何填充/边距，则为815px）
• 使其与较大的元件（500px）一样宽
• 定位它，使其覆盖其他元素，例如

  边距顶部：-500px
  给它一个
  显示：block
  和比其他两个元素更大的
  z索引
  ，以确保它位于顶部

• 在其中/周围放置一个链接，该链接的长度与“覆盖”一样大

---

您也可以尝试在元素周围放置“覆盖”，然后使用

z-index将其置于顶部。
您的意思是希望单击对象和iframe来激活链接，而不是其中的任何内容？我希望激活自己的链接..而不是iframe对象中的内容。请参阅updatehmmm。。javascript本可以是更好的解决方案。。但好的，我会试试看。@DmitryMakovetskiyd或者你可以在对象和iframe上放置一个覆盖层。@DmitryMakovetskiyd它可以工作。尝试单击未覆盖的文本，然后单击覆盖的文本。无效。。老实说如果你认为iframe是一个工作div。，它不会覆盖它。我尝试了z-index，正如你在我的例子中看到的。。它不起作用