jQuery中的事件冒泡

什么是冒泡

<div id="content"> 外层div元素
    <span>内层span元素</span>
</div>
<div id="msg"></div>

当点击span元素时,会输出内层span元素被点击，外层div元素被点击，body元素被点击3条记录。这就是由于事件冒泡引起的。

冒泡过程

停止事件冒泡

$('span').bind('click', function (event) { //event:事件对象
 	 var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
    $('#msg').html(txt);
    event.stopPropagation(); //停止事件冒泡
});
//这样点击span时，只会输出1条记录。

阻止默认行为

event.preventDefault(); 可以改写为：return false;也可以把事件冒泡中的event.stopPropagation(); 改写为：return false;

$(function () {
     $(ele).bind('click', function (event) {
       var username = $('#username').val(); //获取元素的值
       if (username == "") { 
         alert('文本框的值不能为空'); 
        //event.preventDefault(); //阻止默认行为（表单提交）
         return false;
       }
     });
   });

事件捕获

参考文章1

参考文章2