【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法 分类： ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(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了（希望大家看了心情好又暖）



版权声明：本文为博主原创文章，未经博主允许不得转载。

posted @ 2015-06-26 11:05  snow_finland  阅读(505)  评论(0)  编辑  收藏  举报