如何使用jquery检测iframe中的点击事件答案

【问题标题】：How to detect click event in iframe using jquery如何使用jquery检测iframe中的点击事件
【发布时间】：2016-05-24 03:08:58
【问题描述】：

这是我的 iframe：

#htmlDiv {
    position: absolute;
    top: 0px;
    left: 300px;
    height: 650px;
    width: 1130px;
}

#htmlFrame {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    height: 630px;
    width: 1110px;
}

<div id="htmlDiv">
    <iframe id="htmlFrame"></iframe>
</div>

$('#htmlFrame').click(function(){
    alert('clicked');
});

但是当我在 iframe 内单击时，它不会显示“已单击”。
如何检测 iframe 内的点击。

【问题讨论】：

How to add click event to a iframe with JQuery的可能重复
我试过了，但对我不起作用。
看看答案stackoverflow.com/questions/2381336/…
所以试试这个：jsfiddle.net/4HQc4，来自stackoverflow.com/questions/15080222/add-click-event-to-iframe
可能重复：stackoverflow.com/questions/6452502/…

标签： javascript jquery html iframe

【解决方案1】：

您无法检测到iframe 上的点击事件。可以做的是您可以在您的iframe 上放置一个overlapping layer 并捕获重叠div 的点击事件。见下sn-p：

$("#overlap").on("click",function(){
		alert("click");
		$("#overlap").css("z-index",-1);

});
$("#htmlFrame").on("mouseleave",function(){
		$("#overlap").css("z-index",1);
});

#htmlDiv {
    position: absolute;
    top: 0px;
    left: 300px;
    height: 65px;
    width: 113px;
}

#htmlFrame {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    height: 63px;
    width: 110px;
}

#overlap{
  position: absolute;
  background-color:trasparent;
  top: 0px;
  left: 0px;
  margin: 10px 10px 10px 10px;
  padding: 0px 0px 0px 0px;
  width: 110px;
  height:63px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="htmlDiv">
    <iframe id="htmlFrame"></iframe>
  <div id="overlap">
</div>
</div>

【讨论】：

但是点击不会传播到 iframe，是吗？
不，我很确定它不能。

【解决方案2】：

您当前的代码工作正常，尝试将其单击到iframe 的边框，然后将显示警报。我尝试通过向iframe 添加叠加层来为您创建解决方案

你可以看到DEMO

<div id="htmlDiv">
    <iframe id="htmlFrame"></iframe>
    <div id="overlay">
    </div>
</div>

【讨论】：

【解决方案3】：

我这样做了：

<div style="position:relative;">
    <iframe src="..."></iframe>
    <div style="position:absolute;top:0;left:0;right:0;bottom:0;eventual mouse cursor style" onclick="eventual alternative action"></div>
</div>

【讨论】：