Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation

• Event.preventDefault() 取消浏览器对当前事件的默认行为。
• Event.stopPropagation() 阻止事件冒泡。
• Event.stopImmediatePropagation() 阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也能阻止事件的冒泡。

Event.preventDefault

• 该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

  <a id="link" href="http://www.baidu.com">百度一下a>
  
  <script>
     var link = document.getElementById('link');
  
     link.addEventListener('click', function(event){
         console.log(event.cancelable); //true
         event.preventDefault(); //不会跳转
     });
  script>
  

Event.stopPropagation

<div id="parent" style="width: 100px;height: 100px;background: lawngreen;overflow: hidden;">
    <div id="son" style="width: 50px;height: 50px;background-color: lightcoral;margin: 25px;">点击我div>
div>

<script>
    var parent = document.getElementById('parent');
    var son = document.getElementById('son');


    parent.addEventListener('click', function(){
        console.log('parent'); //不触发
    }, false);

    son.addEventListener('click', function(event){
        event.stopPropagation();
        console.log('son'); //显示son
    }, false);
script>

Event.stopImmediatePropagation

 <div id="parent" style="width: 100px;height: 100px;background: lawngreen;overflow: hidden;">
   <div id="son" style="width: 50px;height: 50px;background-color: lightcoral;margin: 25px;">点击我</div>
</div>

<script>
    var parent = document.getElementById('parent');
    var son = document.getElementById('son');


    parent.addEventListener('click', function(){
        console.log('parent'); //不触发
    }, false);

    son.addEventListener('click', function(event){
        event.stopImmediatePropagation();
        console.log('son1'); //显示 son1
    }, false);

    son.addEventListener('click', function(event){
        console.log('son2'); //不触发
    }, false);
</script>