在iframe包装元素上单击事件

Question

我可能会失去理智......

我有一个div元素，它持有一个IFRAME。我使用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 +。

修改你的小提琴：

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

New fiddle

请注意，用户将无法以这种方式与iFrame互动。