您的位置：首页 > 其它

【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法 分类： ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(0) 收藏

2015-06-26 11:05 791 查看
比如下面这个例子：

<!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了（希望大家看了心情好又暖）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航