阻止冒泡事件 解决方法2
在进行点击事件时,判断一下,所点的对象(e.target)是否是父级元素(可以判断是否含有父级元素的特有class),如果是,则执行第一层的点击事件。
举个栗子:
HTML:
<div id="clickme">click me</div> <div id="bg" class="bg"> <div id="inner"> <h2>content area</h2> <div id="btn">click me</div> </div> </div>
CSS:
body {
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
#bg {
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
display: none;
}
#bg.show {
display: block;
}
#inner {
width: 200px;
height: 200px;
background: #fff;
}
JS:
var $ = function(elem) { return document.getElementById(elem) } $('clickme').onclick = function() { $('bg').classList.add('show') } $('bg').onclick = function(e) { if(e.target.classList.contains('bg')) { this.classList.remove('show') } } $('btn').onclick = function() { $('bg').classList.remove('show') }
执行:https://jsfiddle.net/9u4y1sru/
JQuery:
HTML:
<p class="btn">click me</p> <div class="bg"> <a href="javascript:;" class="btn2">click me2</a> </div>
CSS:
.bg{position: fixed;width: 100%;height:100%;background: rgba(0,0,0,0.3);display:none;top:0;left:0;} .bg .btn2{display:block;width:200px;height:200px;background:#fff;margin: 100px;padding:200px;}
JS:
$('.btn').click(function(e){ $('.bg').show(); }); $('.bg').click(function(e){ if($(e.target).hasClass('bg')){ $('.bg').hide(); } }); $('.btn2').click(function(){ alert('我还在'); });