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
导航到他们的父节点。
将事件附加到此节点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的onclick事件不匹配报价（即错过结束报价）

我还去了div（以及一些边界）添加了一些边距和填充，以说明点击div时的onclick事件触发（应该如此）。请注意，它已附加到div而不是iframe。

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

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>

当里面有iframe时，可以点击div

2 个答案:

逻辑：