JS中stopPropagation，preventDefaul

在我们日常开发中经常会碰到使用他们。不知道的时候就百度，然后大概的看一下，试试在我们代码中使用，如果测试通过就OK了，可能我们不是特别了解他们。下面主要讲他们的区别。

event.stopPropagation()

阻止捕获和冒泡阶段中当前事件的进一步传播。停止传播事件，不会阻止默认行为（比如a标签链接跳转，表单提交，input输入，复选框选中）
捕获：从元素外到里。假如在外层元素添加点击事件，没有使用stopPropagation方法的话，如果该外层元素的子元素有点击事件，那么该子元素的点击事件也会执行。
冒泡：从子元素到父元素，一层一层往外传播

<div id="parent">
    parent
    <div id="child">
        child
    </div>
</div>
<script type="text/javascript"> 
var parent = document.getElementById('parent'); 
var child = document.getElementById('child'); 
parent.onclick = function(e) { 
    console.log('parent')
} 
child.onclick = function(e) { 
    console.log('child')
}
<script> 

点击parent的区域(从外到内传播)，控制台输出,

> parent
> child

点击child的区域（从内到外传播），控制台输出

> child
> parent

点击parent,parent点击事件增加stopPropagation()，控制台输出

parent.onclick = function(e) { 
    e.stopPropagation()
    console.log('parent')
} 
> parent

点击child,child点击事件增加stopPropagation()，控制台输出

child.onclick = function(e) { 
    e.stopPropagation()
    console.log('child')
} 
> child

event.preventDefault()

阻止默认行为，但事件还是继续传播（除非碰到事件调用stopPropagation或stopImmediatePropagation()，才停止传播）。默认时间是默认跳转的，比如a标签跳转（经常会碰到阻止页面跳转，这时候就需要调用这个方法了），复选框选中，表单提交，输入框写入等等。
例子如下：（加了e.preventDefault()页面不会跳转 ）

<a href="https://www.baidu.com" id="aTag">百度</a>
    <script type="text/javascript"> 
        var aTag = document.getElementById('aTag');
        aTag.onclick = function (e) {
             e.preventDefault() 
        }
    </script> 

return false

阻止事件冒泡，也阻止默认行为。一般我们使用的阻止行为尽量避免使用return false，因为有时候我们只需要阻止默认行为，但是还需要冒泡，使用return false会导致我们的代码出现问题。
按照阻止顺序：

1. event.preventDefault()
2. event.stopPropagation()
3. 停止函数执行并返回