按钮点击时而有效时而无效问题
- 背景：由于项目使用jsp写的页面，点击按钮切换图片，图片上的按钮是定位上去添加的点击事件，测试发现按钮第一次点击有效，再次点击无反应，再次刷新又可以点击，即偶发性点击失效
尝试以下方案：
1：由于图片上嵌套div,导致div重叠，设置z-index越大越在上边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.insert{
position: relative;
z-index:100;
background: green;
width:300px;
height:300px;
top:100px;
}
.parent{
/*position:relative;
z-index: 1000;*/
width:200px;
height:200px;
/*left:0;
top:-50px;*/
border:1px solid #eee;
}
.subbottom{
position:relative;
z-index: 50;
width:200px;
height:200px;
background: red;
top:-100px;
left:0;
}
.subtop{
position: relative;
z-index:1100;
width:100px;
height:100px;
left:0;
top:0;
background: blue;
}
</style>
</head>
<body>
<div class="insert"></div>
<div class="parent">
<div class="subtop"></div>
<div class="subbottom"></div>
</div>
</body>
</html>
参考
https://blog.csdn.net/apple_01150525/article/details/76546367
2：尝试重新加载页面，发现加载后还是无效，点击查看此显示点击的静态页面，
3：设置禁止启动父级元素，阻止冒泡
$('#div2').click(function (e) {
e.stopPropagation();
return false;
});
在一系列尝试都无效后，发现自己定义的div高度太小，设置高度和最低的的div图片高度一样高，问题解决，
总结：由于最外层div高度低于底层图片高度，点击图片上的按钮时出现偶发性点击不动的现象，即点击按钮实际点击的是底层的div静态图片，增加子元素的高度以及设置子元素有效。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
