场景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