js—事件冒泡

事件冒泡:当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window.

<div id="parent"> 父亲
  <div id="son">儿子</div>
</div>

CSS

#parent,
#son {
  color: #fff;
}

#parent {
  width: 500px;
  height: 500px;
  color: #fff;
  font-size: 20px;
  background-color: skyblue;
  margin: 20px auto 0;
}

#son {
  width: 300px;
  height: 300px;
  background-color: orange;
  margin: 0 auto;
}

JavaScript

var parent = document.querySelector('#parent');
var son = document.querySelector('#son');
son.onclick = function (e) {
  console.log(e);
  console.log('儿子');
}
parent.onclick = function (e) {
  console.log(e);
  console.log('父亲');
}

代码演示：

当鼠标点击父亲的盒子时，控制台输出只有父亲这个盒子，但当点击儿子时，控制台会输出父亲和儿子，为了避免这种情况，我们需要阻止事件冒泡

JavaScript

var parent = document.querySelector('#parent');
var son = document.querySelector('#son');
son.onclick = function (e) {
  console.log(e);
  console.log('儿子');
  var ev = window.event || e;
  if (document.all) {
    // 阻止事件冒泡 
    ev.cancelBubble = true;
  } else {
    ev.stopImmediatePropagation()
  }
}
parent.onclick = function (e) {
  console.log(e);
  console.log('父亲');
  var ev = window.event || e;
  if (document.all) {
    // 阻止事件冒泡 
    ev.cancelBubble = true;
  } else {
    ev.stopImmediatePropagation()
  }
}

代码演示：