event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件，但一直不是很懂它和preventDefault()等的区别，今天查了查文档和大神们的博客，在这里对相关知识点做一个总结
首先开门见山，总结一下这三者的区别：
event.stopPropagation():阻止事件冒泡，对默认事件无影响
event.preventDefault():阻止默认事件，和事件冒泡无关
return false：原生js中，阻止默认事件，jQuery中既会阻止默认事件又会阻止事件冒泡
这样理解起来可能不是很清晰，我们都知道，a标签的默认事件之一为点击链接跳转，让我们做一个与此相关的小demo加深一下印象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{width: 100px;height: 100px;border: 1px solid #ccc;} div a{display: block;width: 30px;height: 100px;background: skyblue;} </style> </head> <body> <div id="box1"> <a href="http://www.baidu.com"></a> </div> <div id="box2"> <a href="http://www.baidu.com"></a> </div> <div id="box3"> <a href="http://www.baidu.com"></a> </div> <div id="box4"> <a href="http://www.baidu.com"></a> </div> <div id="box5"> <a href="#"></a> </div> <script> /*event.stopPropagation()&&event.preventDefault()&&return false*/ box1.onclick=function(){ console.log("parent"); }//不阻止默认事件和冒泡，打印并且跳转
/*event.stopPropagtion()，阻止事件冒泡，但不影响默认事件*/ box2.onclick=function(){ console.log("parent"); } box2.children[0].onclick=function(event){ event.stopPropagation();//仅跳转，冒泡被阻止 }
/*event.preventDefault(),阻止默认事件，但冒泡不被阻止*/ box3.onclick=function(){ console.log("parent"); } box3.children[0].onclick=function(event){ event.preventDefault();//打印parent，不跳转 }
/*return false; 在原生中，该方法仅会阻止默认事件，相当于调用了event.preventDefault()，但在jQuery中，它 会同时阻止事件冒泡和默认事件*/ box4.onclick=function(){ console.log("parent"); } box4.children[0].onclick=function(){ return false; }</script> </body> </html>
