jq阻止冒泡

jQuery是个很好用的库，封装了很多方法，熟练的话，对开发效率提升很不错。

jQuery中是怎么来阻止默认事件的呢？

有时候用户的操作未满足某些条件时，需要阻止某些元素的默认行为，如链接的跳转和表单的提交等，jQuery 提供了 event.preventDefault() 方法来实现。

  $(":submit").click(function(event) {     //为方法添加一个事件对象参数  
                    //当未输入用户名时，提示并阻止提交  
                    if ($(":text").val() == "") {     
                        $("#msg").text("用户名不能为空");  
                        event.preventDefault();     //阻止提交按钮的默认行为（提交表单）  
                    }  
                });  

那么jQuery中是怎么来阻止冒泡事件的呢？

• 第一种方法：使用event.stopPropagation();

 $("#div1").mousedown(function(event){
          // 事件响应程序
         console.log("十年生死两茫茫，");
         event.stopPropagation();
 });

• 第二种方法： return false;

 $("#div1").mousedown(function(event){
           //响应事件：要干什么 
          console.log("不思量，自难忘！");
           return false;//阻止冒泡
 });

• 两种方式的区别：

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

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

  • 记住：两个共同点，写 响应函数必须传参数event。

总结如下：

• 写法：$(dom) + 触发动作 + 触发程序

• 必须方法添加一个事件对象参数 event必不可少

• 阻止默认：event.preventDefault();

• 阻止冒泡：event.stopPropagation();

• 阻止默认和冒泡：return false;

  • 如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。