js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景

一、阻止冒泡事件。

示例图：

通常，在很多用户界面中，都经常出现如上图所示，点击列表的时候，进入这条数据的详情页面，点击编辑的时候，弹窗编辑这条数据的信息。但是呢，做完之后，发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面，也就是两个事件都触发了，这个时候我们就需要在点击编辑的时候，阻止事件继续往上派发。

代码：

$('.toDetail').on('click',function(){
    console.log('跳转详情页面');
});
$('.editDetail').on('click',function(e){
    console.log('打开编辑详情弹窗');
    e.stopPropagation();    //阻止事件往上的dom派发。
});

二、阻止默认行为。

阻止默认行为的应用，一般拿来阻止原生html的标签已经实现的功能，比如说：a标签超链接的点击后会跳转网址，富文本ctrl+v会粘贴内容，修改某个快捷键触发的效果（打开控制台、复制文本）等等。

代码：

    <p>富文本：</p>
    <div id="text" contenteditable="true" style="width:400px;height:200px;background:#ccc;">
        
    </div>
    <a href="http://www.baidu.com">132</a>

$("#text").on("paste",function(e){
    e.preventDefault();
});
$("a").on("click", function (e) {
    e.preventDefault();
});