SOURCE

var option={
  capture:false,
  //once:true
}
$('#parent-wrap')[0].addEventListener('click',function(){
  console.log('p捕获处理');
},option)
$('#child-wrap')[0].addEventListener('click',function(e){
    e.stopPropagation()
  console.log('c冒泡处理');
},false)

$("#link").click(function(e){
  $("#text").text("阻止默认的跳转事件");
  e.preventDefault();
})
//事件委托
$("#ul")[0].addEventListener('click',function(e){
  if(e.target.tagName=="LI"){
   console.log("点击了第"+(Number($(e.target).index())+1)+'个元素')
  }
})
// $("li").on('click',function(){
//   console.log('li 的事件处理程序')
// })
$("#ul").prepend("<li>新增菜单</li>");

<div id="parent-wrap">
  <div id="child-wrap"></div>
</div>

<a href="www.baidu.com" target="_blank" id="link">link1</a>
<span id="text"></span>
<ul id="ul">
  <li>菜单一</li>
  <li>菜单二</li>
  <li>菜单三</li>
</ul>

#parent-wrap{
  width:100px;
  height:100px;
  border-radius:4px;
  padding:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#afafaf;
  cursor:pointer;
  &:hover{
      background:#979797;
  }
}
#child-wrap{
  width:30px;
  height:30px;
  border-radius:4px;
  padding:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:green;
    cursor:pointer;
  &:hover{
    background:#06c006;
  }
}