【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法

最新推荐文章于 2022-12-19 15:17:58 发布

snow_finland

最新推荐文章于 2022-12-19 15:17:58 发布

阅读量4.4k

点赞数 1

本文链接：https://blog.csdn.net/snow_finland/article/details/46647505

版权

ie bug 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

ie absolute click

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

比如下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.wrap{
	width:540px;
	height:260px;
	position:relative;
}
.layer_pre{
	position:absolute;
	top:0;
	left:0;
	width:250px;
	height:240px;
}
.layer_next{
	position:absolute;
	top:0;
	right:0;
	width:250px;
	height:240px;
}
</style>
</head>

<body>
<div class="wrap">
	<img src="http://www.baidu.com/img/bd_logo1.png" />
	<a class="layer_pre" id="J_pre" href="javascript:;"></a>
	<a class="layer_next" id="J_next" href="javascript:;"></a>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
	$('#J_pre').click(function(){
		alert('pre');
	});
	
	$('#J_next').click(function(){
		alert('next');
	});
});
</script>
</html>

从理论上来说，点击#J_pre和#J_next 应该会触发alert事件，

然而实际结果是，在ie7、8、9、10（ie6及以下没有做尝试），都没有触发到该事件（ie11、firefox、chrome可以正常触发）

（把#J_pre和#J_next换成div标签仍然无法触发，所以可以证明这个和用a标签没有关系）

为了查看这一问题，对#J_pre和#J_next的样式分别加上

background-color:#000;

来查看了一下层级关系，实际结果是#J_pre和#J_next确实在最上方，而且加了背景色之后就能正常触发alert事件了（至于是为什么就能触发了，未能得出结论，但肯定是ie的bug）

那么为了保证肉眼看上去并没有加背景色，但是实际加了背景色以达到能触发事件的效果

对#J_pre和#J_next的样式分别加上

background-color:#000;
filter:alpha(opacity=0);
opacity:0;

这样就能解决ie下的这个bug了（希望大家看了心情好又暖）

snow_finland

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法

不如下面这个例子：Demo.wrap{ width:540px; height:260px; position:relative;}.layer_pre{ position:absolute; top:0; left:0; width:250px; height:240px;}.layer_next{ position:absolute; top:
复制链接

扫一扫