阻止冒泡事件 解决方法2

Posted 2020-08-23 小番茄酱

在进行点击事件时，判断一下，所点的对象(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(‘我还在‘);
          });