javascript - iframe 包装元素上的单击事件

Question

我可能会失去理智..

我有一个包含 IFRAME 的 div 元素。我使用 javascript 注册了一个点击事件。当我在 IFRAME(灰色区域)上时，该点击事件不起作用，但当我点击 IFRAME 外部区域(蓝色区域)时，点击事件工作正常。

我应该怎么做才能让这个点击事件在 IFRAME 上也能正常工作？

Fiddle

HTML:

<div id="main">
    <iframe></iframe>
</div>

Javascript

var main = document.getElementById('main');
main.onclick = function () {
    alert('hello');
}

PS:IFRAME 是从插件动态生成的，我无法访问此代码

Answer 1

您可以添加 pointer-events: none;到 iFrame 的 CSS - 这样它就不会捕获点击。在 FF、Safari、Chrome、Opera 和 IE11+ 中受支持。

修改你的 fiddle :

iframe {
    pointer-events:none;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    background-color: grey;
}

New fiddle

请注意，用户将无法通过这种方式与 iFrame 进行交互。