阻止事件冒泡和默认事件

在元素标签嵌套中，可能会有各级元素绑定了不同的事件，例如<dt><a>标题</a></dt>，a标签绑定了事件，dt也绑定了事件，如果促发a的事件，则会冒泡到dt上，dt的事件也会被触发。阻止事件冒泡，用e.stopPropagation()；

$('dt').click(function() {
 $(this).toggleClass('on');
 });
 $('dt a').click(function(e) {
 e.stopPropagation();
 });

默认事件

<script>
 $(function(){
 $("#sub").bind("click",function(event){
 var username = $("#username").val(); //获取元素的值
 if(username==""){ //判断值是否为空
 $("#show").html("<p>文本框的值不能为空.</p>"); //提示信息
 event.preventDefault(); //阻止默认行为 ( 表单提交 )
 }
 })
 })
 </script>
 <form action="test1.html">
 用户名：<input type="text" id="username" />
 <br/>
 <input type="submit" value="提交" id="sub"/>
 </form>
<div id="show"></div>

可见event.preventDefaule()方法确实阻止了默认行为即提交表单，但是如果有冒泡事件，enent.preventDeafult()方法是不够的还要调用
event.stopPropagation()方法，简单的替代方式就是return false；两个都可以阻止掉。也就是上面的所有 event.stopPropagation(); 和
event.stopPropagation()方法都可以用return false取代。

js原生兼容写法：

/**
 * 阻止冒泡事件,需要传入事件参数
 */
function cancelBubble(event){
    event && event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
}