解决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");
})

})

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐