如何为embed标签添加onClick事件？Chrome中点击事件不生效如何解决

标签加载的外部内容会接管自身区域的鼠标交互，点击事件会优先被内部加载的内容捕获，不会冒泡到元素本身，因此绑定在上的onclick事件在Chrome中无法触发。而mouseover、mouseleave这类事件不会被内部内容完全拦截，所以可以正常生效。

给外层套一个父容器，叠加一个和尺寸一致的透明遮罩层，把点击事件绑定在遮罩层上即可：

代码示例 #

HTML #

<div class="embed-wrapper">
  <embed src="http://localhost/credit-app1/" onload="bottomRight()">
  <!-- 遮罩层绑定点击事件 -->
  <div class="embed-mask" onclick="increaseSize()"></div>
</div>

CSS #

.embed-wrapper {
  position: relative;
  /* 初始尺寸和你原逻辑的embed默认尺寸一致 */
  width: 100px;
  height: 100px;
}
.embed-wrapper embed {
  width: 100%;
  height: 100%;
}
.embed-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

JavaScript #

function increaseSize(){
    var wrapper = document.querySelector(".embed-wrapper");
    if(wrapper.style.width == "400px"){
        wrapper.style.width = "100px";
        wrapper.style.height = "100px";
    }else{
        wrapper.style.width = "400px";
        wrapper.style.height = "500px"; 
    }
    console.log(wrapper)
}

如果需要同时支持embed内部内容的点击交互，且embed加载的内容和当前页面同源，可以在内部内容的页面中绑定点击事件，通过postMessage通知父页面触发对应逻辑。

内容的提问来源于stack exchange，提问作者Ibrahim Kashif