内部有iframe时使div可点击

Question

我想向div中添加onclick函数，但是当div中有一个facebook插件iframe时，onclick函数不起作用。

有代码：

<div onclick="alert('123)">
  <iframe 
    src="https://www.facebook.com/plugins/page.php?..." 
    width="470" 
    height="160" 
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowTransparency="true">
  </iframe>
</div>

Answer 1

您可以尝试如下操作：

逻辑：

• 在父窗口上，搜索所有iframes
• 导航到其父节点。
• 将事件附加到此节点。

 window.addEventListener('load', registerEvent) function registerEvent(){ var divs = document.querySelectorAll("iframe"); for(var i = 0; i< divs.length; i++){ divs[i].parentNode.addEventListener("click", clickHandler) } } function clickHandler(){ console.log(this.innerHTML); } 

 div{ background: #ddd; min-height: 100px; } iframe{ background: #fff; } 

 <div> <iframe src="https://www.facebook.com/plugins/page.php?..." width="470" height="160" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"> </iframe> </div> 

Answer 2

您的onclick事件的引号不匹配（即缺少右引号）

我还去了，并向div添加了一些边距和填充（以及一些边框），以说明单击div时（应有的情况）触发的onclick事件。 请记住，它是附加到div而不是iframe 。

您可以使用JS（或JQuery）以编程方式将点击处理程序附加到iframe或者将另一个onclick添加到iframe本身（不知道，如果可以修改的话）

 div { width: 470px; height: 160px; border: 1px solid gray; margin: 15px; padding: 15px; } div:hover { cursor: pointer; } 

 <div onclick="alert('123')"> <iframe src="https://www.google.ca" width="470" height="160" style="border:1px solid green;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"> </iframe> </div>