这个布局div里有一个a链接，我们队div和a都添加点击事件（使用jq方法添加点击事件）来查看效果。
<div class="testBox">
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
</div>
$('.testBox').click(function () {
console.log(1);
});
$('.testBox a').click(function () {
console.log(2);
});
默认情况下
控制台输出结果为2、1并且跳转打开链接。 因为事件冒泡原理，DOM上触发事件后，通过DOM树往上，在每一级父元素上触发。 有时候我们想先不执行跳转链接或者只执行当前DOM的事件，我们就用到下面的了。
event.preventDefault();//阻止默认行为
$('.testBox a').click(function (event) {
event.preventDefault();
console.log(2);
});
控制台输出结果为2、1链接没有跳转。 阻止事件的默认行为，但不阻止冒泡。 如果考虑IE还需要进行兼容（用三元表达式进行兼容）
event.preventDefault ? event.preventDefault() : event.returnValue=false;
event.stopPropagation();//阻止事件冒泡
$('.testBox a').click(function (event) {
event.stopPropagation();
console.log(2);
});
控制台输出结果为2并且跳转打开链接。 阻止事件的冒泡，但不阻止事件的默认行为。 如果考虑IE还需要进行兼容（用三元表达式进行兼容）
event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true;
return false;
$('.testBox a').get(0).addEventListener("click",function(){
return false;
console.log(2);
},false);
控制台输出结果为1并且跳转打开链接。 若使用a.addEventListener,则return false 不会阻止默认行为； 使用原生js时，若要阻止默认行为，最好还是用event.preventDefault（针对非IE）或event.returnValue=false（针对IE）来设定。
$('.testBox a').click(function (event) {
return false;
console.log(2);
});
控制台没有输出结果链接也咩有进行跳转。 使用a.onclick或a.attachEvent,则 return false会阻止默认行为； 使用jquery，return false 即会阻止默认行为，也会阻止事件的冒泡。在jquery中，一般使用return false.
在使用的时候要注意return false;后面的代码不会执行。