本文已参与「新人创作礼」活动，一起开启掘金创作之路。
preventDefault() 方法
定义： 取消事件的默认动作。 说明： 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href="http://www.tmall.com" id="btn">go天猫</a>
<script>
$("#btn").on('click', function(e){
e.preventDefault();
});
</script>
</body>
</html>
我们都知道，我们点击a链接，直接会进行跳转。现在给a链接点击事件添加上 preventDefault() 方法，发现点击没有进行跳转。因为a链接默认事件动作是跳转，现在加上这个方法，取消了原来的事件动作。
stopPropagation() 方法
定义： 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 说明： 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
.parent {
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
#parent1 {
background-color: #a7dc19;
}
#parent2 {
background-color: #dcbb19;
}
.child {
border: 1px red solid;
}
.child p {
height: 30px;
width: 100px;
background-color: #19dcaf;
cursor: pointer;
margin: 50px auto;
text-align: center;
line-height: 30px;
}
</style>
<body>
<div class="parent" id="parent1" onclick="alert(this.id)">
<div class="child">
<p onclick="alert('这是p元素')">点我呀</p>
</div>
</div>
<div class="parent" id="parent2" onclick="alert(this.id)">
<div class="child" onclick="stopUp(event)">
<p onclick="alert('这是p元素')">你再点我呀</p>
</div>
</div>
<script>
function stopUp(e)
{
event.stopPropagation();
}
</script>
</body>
</html>
点击图1效果为：
点击图2效果为：
图1和图2的代码区别在于图2的 child类div元素点击事件绑定了 event.stopPropagation() 方法，因为这个方法停止事件的传播，阻止它被分派到其他 Document 节点。也就是我们常说的阻止事件冒泡。
