JQuery阻止冒泡事件on绑定中异常情况分析

本文转载自https://www.cnblogs.com/tengj/p/4794947.html，纯粹作为日常笔记使用

科普下事件冒泡以及默认行为,以下面例子举列子：

    事件冒泡：当点击内部button元素时，会触发自身及外层 a的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

                       事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为。

    默认行为：例子中a的href跳转链接就是所谓的默认行为，或者是表单form的提交。

---

JQuery中阻止冒泡常用到的有以下3个方法：

1：event.stopPropagation();  只阻止了冒泡事件， 默认行为没有阻止

2：event.preventDefault();     只阻止了默认事件，冒泡事件没有阻止

3：return false;                       冒泡事件和默认事件都阻止

 

---

具体对应列子：

1：event.stopPropagation();

 
         我是超级链接子按钮
         

         
 

效果截图：

默认点击父亲元素：

 

默认点击子元素，事件冒泡了：

 

加上event.stopPropagation()，可以看到阻止了父亲的单击事件，但是没有阻止父亲a元素hreaf的默认行为，也就是打开新的窗口：

---

2：event. preventDefault();

 

event. preventDefault()加上后，有阻止了默认行为，没有打开新的href窗口，但是没有阻止冒泡事件，父亲的click还是触发了：

---

 

3：return false; 

 

return false加上后既没有冒泡，也没有打开新窗口：

 

---

以上就是工作上经常用到的阻止冒泡和默认行为的方法。实际情况根据需求确定使用哪种方法

这里再说明一下如果是动态生成的元素用on来绑定事件，遇到的阻止冒泡的一些问题，大家参考一下下面是我测试的几个列子：

1：父亲跟孩子同时用on来绑定：

    A:绑定的父节点不是同一个，父亲绑定的父元素更外面(绑定body)：

 

 
         

         我是超级链接子按钮
         
         

         
     

 

 

 

 

测试结果：有阻止冒泡事件

    B:绑定的父节点不是同一个，孩子绑定的父元素更外面（绑定body）

测试结果：阻止冒泡失败，并且是父亲元素a的click先触发

 

  C:绑定的父节点是同一个:

都绑定在body或者div上，测试结果正常，有阻止冒泡事件：

2：父亲直接写onclick事件，孩子直接用on绑定

 
         

         我是超级链接子按钮
         
         

         
 

 

 

测试结果：阻止冒泡失败，并且是父亲元素a的click先触发

3：孩子直接写onclick事件，父亲直接用on绑定

 
         

         我是超级链接子按钮
         
         

         
 

 

测试结果：阻止冒泡成功

 

---

好了，以上有涉及on绑定做的测试总结如下：

1：父亲跟孩子同时用on来绑定：

   A:绑定的父节点不是同一个，父亲绑定的父元素更外面(绑定body)      阻止冒泡事件成功

   B:绑定的父节点不是同一个，孩子绑定的父元素更外面（绑定body）  阻止冒泡失败，并且是父亲元素a的click先触发

   C:绑定的父节点是同一个:                                                                   阻止冒泡事件成功

2：父亲直接写onclick事件，孩子直接用on绑定                                    阻止冒泡失败，并且是父亲元素a的click先触发

3：孩子直接写onclick事件，父亲直接用on绑定                                    阻止冒泡成功

 

常规JQuery中阻止冒泡常用到的有以下3个方法：

1：event.stopPropagation();  只阻止了冒泡事件， 默认行为没有阻止

2：event.preventDefault();     只阻止了默认事件，冒泡事件没有阻止

3：return false;                       冒泡事件和默认事件都阻止