给iframe添加点击事件
解决iframe标签所处的盒子点击事件失效问题给每个iframe标签设置样式,目的是时消除iframe标签里面的事件#iframe1,#iframe2, #iframe3, #iframe4 {pointer-events: none;}再给包裹iframe标签的盒子设置点击事件HTML:<div class="box"><div class="box1" style="back
·
解决iframe标签所处的盒子点击事件失效问题
给iframe标签设置点击事件时发现无论如何都不起作用,百度后发现原来iframe是没有点击事件的,需要做一些处理
给每个iframe标签设置样式,目的是时消除iframe标签里面的事件
#iframe1,#iframe2, #iframe3, #iframe4 {
pointer-events: none;
}
再给包裹iframe标签的盒子设置点击事件
HTML:
<div class="box">
<div class="box1" style="background-color: rgba(0, 0, 0, 0);position:relative;overflow: hidden;">
<iframe src="AAA.html" frameborder="0" width="250%" height="250%" id="iframe1"
style="position: absolute;left:-75%;top:-75%;transform: scale(0.4);"></iframe>
</div>
<div class="box2" style="background-color: rgba(0, 0, 0, 0);position:relative;overflow: hidden;">
<iframe src="BBB.html" frameborder="0" width="250%" height="250%" id="iframe2"
style="position: absolute;left:-75%;top:-75%;transform: scale(0.4);"></iframe>
</div>
<div class="box3" style="background-color: rgba(0, 0, 0, 0);position:relative;overflow: hidden;">
<iframe src="EEE.html" frameborder="0" width="250%" height="250%" id="iframe3"
style="position: absolute;left:-75%;top:-75%;transform: scale(0.4);"></iframe>
</div>
<div class="box4" style="background-color: rgba(0, 0, 0, 0);position:relative;overflow: hidden;">
<iframe src="CCC.html" frameborder="0" width="250%" height="250%" id="iframe4"
style="position: absolute;left:-75%;top:-75%;transform: scale(0.4);"></iframe>
</div>
</div>
// 每个iframe盒子的点击事件
$(function(){
$(".box1").click(function(){
alert(“aaa”);
})
$(".box2").click(function(){
alert("bbb");
})
$(".box3").click(function(){
alert("ccc");
})
$(".box4").click(function(){
alert("ddd");
})
})
更多推荐
已为社区贡献1条内容
所有评论(0)