你可能不知道的preventDefault、stopPropagation

一：preventDefault,对应vue 事件修饰符.prevent

阻止默认事件执行，那么什么是默认事件那？比如点击a标签跳转、点击单选框或者复选框为选中。代码示例如下

HTML

<form>
  <label for="check1">Checkbox:</label>
  <input type="checkbox" id="check1"/>
</form>
<a id='link1' target="_blank"  href="https://mibocun.github.io/">Github Blog</a> 

JavaScript

const  aDom=document.getElementById('link1')
const  inputDom=document.getElementById('check1') 
function bindEvent(ele,type,fn){
      ele.addEventListener(type,fn)
}
bindEvent(aDom,'click',(event)=>{    
    event.preventDefault();    
    alert("我是a标签，启用阻止默认事件，不能跳转") 
})
bindEvent(inputDom,'click',(event)=>{    
     event.preventDefault();   
     alert("我是多选框，启用阻止默认事件，不能点击选中")   
}) 

二：stopPropagation：对应vue 事件修饰符.stop

阻止事件冒泡，自下而上，由确定的元素向最不确定的元素传递。Dom为树形结构，层级嵌套。如果一个节点绑定点击事件，其上级节点、上上级的节点同样绑定点击**（如事件不一致，则不影响）**事件。那么在点击此节点时，会由下自上同时触发点击事件。代码示例如下

HTML

<div id="div3" onclick="alert('3');">   
    <div id="div2" onclick="alert('2');">   
       <div id='div1' href='#' onclick="alert('1')"></div>          
    </div>
</div>

CSS

黑色边框区域为#div1,黄色背景区域为#div2，红色边框区域为#div3。

JavaScript

const  div3=document.getElementById('div3')
const  div2=document.getElementById('div2')
const  div1=document.getElementById('div1') 
function bindEvent(ele,type,fn){
    ele.addEventListener(type,fn)
}   
bindEvent(div1,'click',(event)=>{    
     event.stopPropagation();         
 }) 

如果div1调用addEventListener方法，则点击黑色边框区域（即同时点击div1，div2,div3所属区域），则依次弹出1,2,3，点击黑色边框之外，div2黄色背景区域（即同时点击div2,div3所属区域）），则依次弹出2,3.点击白色区域。其它情况，请对应测试。如有bug欢迎指正