(O)阻止默认事件和阻止冒泡的应用场景

场景1：阻止默认事件
   比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作，但是不能让这个a标签产生跳转行为，
所以需要在点击取消的时候 阻止冒泡，防止其跳转。

<a id='cancelBtn' href="https://www.baidu.com">取消按钮</a>
<script>
    document.getElementById("cancelBtn").addEventListener("click",function(e){
　　　　e.preventDefault();
　　　　alert("点击了");
    });
</script>

 

场景2：阻止冒泡
   比如最简单的弹出层：当点击提交按钮的时候提交信息，当点击弹出层周边的空白区域的时候取消遮罩。但
是因为存在事件冒泡机制，点击提交按钮时，点击事件会冒泡到div弹出层，以致遮罩层自动取消，这时我们就
应当阻止事件冒泡了。

<div id="dialog">
    <span id="submit">确定</span>
</div>
<script>
    $("#submit").on("click",function(e){
        e.stopPropagation(); //阻止冒泡，防止冒泡到document层
        ...
    });
    $(document).on("click",function(e){ 
        if($(e.target).closest("#dialog").length == 0){
            $("#dialog").hide(); 
        }
    })
</script>

 

小结：
　　1.阻止事件冒泡，但不阻止默认行为。如 stopPropagation 或 cancelBubble等。
　　2.阻止默认行为，但不阻止事件冒泡。如 preventDefault 方法。
　　3.同时阻止事件冒泡和默认行为。直接 return false 即可。

 

转载请注明文章出处：http://www.cnblogs.com/jacksplwxy/p/6651964.html