preventDefault & stopPropagation

我们先来看看这两个事件方法是如何定义的

preventDefault() 

如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。该方法不会阻止事件通过 DOM 进一步传播。请使用 stopPropagation() 方法来解决。

stopPropagation()

方法防止调用相同事件的传播。传播意味着向上冒泡到父元素或向下捕获到子元素。

简单来说

preventDefault  能够阻止　当前操作（如 click (en-US)，scroll (en-US) 或 beforeunload (en-US)等）触发 容器元素 及之上的 容器元素 等 的可取消的默认事件将不被触发    这里要理解的是两个东西

1，什么叫做默认事件，直观解释就是<a/>标签，默认事件就是打开一个链接。表单默认事件就是提交，以此类推，按钮默认是点击，等等

2，第二个是什么是可取消的默认事件，只是有这么个概念 event.cancelable 为 true 的可取消，false不可取消，目前来看我没遇到不可取消的，遇到后来补充吧

举例  解释这两个事件

 

 执行代码，当点击【试就试】 时 弹出 ‘11’  ‘22’ 并 打开百度链接

 只调用  preventDefault  后  弹出 ‘11’  ‘22’ 无法打开百度链接 a标签的默认事件被取消了

 只调用 stopPropagation  后  弹出  ‘11’ 打开链接  弹出 ‘22’ 的事件和 ‘11’ 的事件属于相同事件，被阻止冒泡传递了

 同时调用  preventDefault  stopPropagation  后 只弹出 ‘11’   两个方法 同时都生效了