jQuery冒泡事件阻止

JQuery 提供了两种方式来阻止事件冒泡。

方式一：event.stopPropagation();
        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });
方式二：return false;
        $("#div1").mousedown(function(event){
            return false;
        });

但是这两种方式是有区别

return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。

event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

场景应用： Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

示例测试代码： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。

而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 

event.stopPropagation(); // 阻止事件冒泡

  当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

  如何防止这种冒泡事件发生呢？如下：

$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
上面的冒泡事件也可以通过return false来处理。

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。
这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值，val() 方法返回或设置被选元素的值。
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             event.preventDefault();  //阻止默认行为 ( 表单提交 ) <form action="test.do" method="post" id="sub"></form>

  } }) })

另一种防止默认行为的方法就是return false 效果一样。
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             return false;
         }
   })
})