科普下事件冒泡以及默认行为,以下面例子举列子：
    事件冒泡：当点击内部button元素时，会触发自身及外层 a的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

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

    默认行为：例子中a的href跳转链接就是所谓的默认行为，或者是表单form的提交。
JQuery中阻止冒泡常用到的有以下3个方法：
1：event.stopPropagation();  只阻止了冒泡事件， 默认行为没有阻止
2：event.preventDefault();     只阻止了默认事件，冒泡事件没有阻止
3：return false;                       冒泡事件和默认事件都阻止
 
具体对应列子：
1：event.stopPropagation();
 <body>

         <a id="p" href="http://www.baidu.com" target="_blank">我是超级链接<button id="sub">子按钮</button></a>

         <div id="text">

         </div>

 </body>
 <script>

         $(function(){

             $("#p").click(function(event){

                 $("#text").append("<p>父亲元素被点击</p>");

             })

             $("#sub").click(function(event){

                 $("#text").append("<p>子元素被点击</p>");

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

             })

         })

     </script>
效果截图：
默认点击父亲元素：
 
默认点击子元素，事件冒泡了：
 
加上event.stopPropagation()，可以看到阻止了父亲的单击事件，但是没有阻止父亲a元素hreaf的默认行为，也就是打开新的窗口：
2：event. preventDefault();
 <script>

         $(function(){

             $("#p").click(function(event){

                 $("#text").append("<p>父亲元素被点击</p>");

             })

             $("#sub").click(function(event){

                 $("#text").append("<p>子元素被点击</p>");

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

             })

         })

 </script>

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

3：return false;

 <script>

         $(function(){

             $("#p").click(function(event){

                 $("#text").append("<p>父亲元素被点击</p>");

             })

             $("#sub").click(function(event){

                 $("#text").append("<p>子元素被点击</p>");

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

             })

         })

 </script>

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

 
以上就是工作上经常用到的阻止冒泡和默认行为的方法。实际情况根据需求确定使用哪种方法
这里再说明一下如果是动态生成的元素用on来绑定事件，遇到的阻止冒泡的一些问题，大家参考一下下面是我测试的几个列子：
1：父亲跟孩子同时用on来绑定：
    A:绑定的父节点不是同一个，父亲绑定的父元素更外面(绑定body)：
 <body id="body">

         <div id="bb">

         <a id="p" href="http://www.baidu.com" target="_blank" >我是超级链接<button id="sub">子按钮</button></a>

         </div>

         <div id="text">

         </div>

     </body>
 <script>

         $(function(){

             /父亲节点a绑定到body中

             $("#body").on("click","#p",function(event){

                 $("#text").append("<p>父亲元素被点击</p>");

             })

             //孩子节点绑定在div中

             $("#bb").on("click","#sub",function(event){

                 $("#text").append("<p>子元素被点击</p>");

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

             })

         })

13 </script>

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

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

         $(function(){

             /父亲节点a绑定到div中

             $("#bb").on("click","#p",function(event){

                 $("#text").append("<p>父亲元素被点击</p>");

             })

             //孩子节点绑定在body中

             $("#body").on("click","#sub",function(event){

                 $("#text").append("<p>子元素被点击</p>");

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

             })

         })

 </script>

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

 
  C:绑定的父节点是同一个:
都绑定在body或者div上，测试结果正常，有阻止冒泡事件：
2：父亲直接写onclick事件，孩子直接用on绑定
 <body id="body">

         <div id="bb">

         <a id="p" href="http://www.baidu.com" target="_blank" onclick="test()">我是超级链接<button id="sub">子按钮</button></a>

         </div>

         <div id="text">

         </div>

 </body>
 <script>

         $(function(){

             $("#bb").on("click","#sub",function(event){

                 $("#text").append("<p>子元素被点击</p>");

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

             })

         })

         function test(){

             $("#text").append("<p>父亲元素被点击</p>");

         }

 </script>

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

3：孩子直接写onclick事件，父亲直接用on绑定
 <body id="body">

         <div id="bb">

         <a id="p" href="http://www.baidu.com" target="_blank">我是超级链接<button id="sub" onclick="test(event)">子按钮</button></a>

         </div>

         <div id="text">

         </div>

 </body>
 <script>

         $(function(){

             //父亲绑定到body

             $("#body").on("click","#p",function(event){

                 $("#text").append("<p>父亲元素被点击</p>");

             })

         })

         function test(event){ //event在onclick那边直接传入，这样才支持所有浏览器

             $("#text").append("<p>子元素被点击</p>");
　　　　　　　　 event.stopPropagation();

         }

 </script>

测试结果：阻止冒泡成功

 
好了，以上有涉及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;                       冒泡事件和默认事件都阻止
 

JQuery阻止冒泡事件on绑定中异常情况分析的更多相关文章

  1. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...

  2. jquery 阻止冒泡事件和阻止默认事件

    jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. 【笔记】jquery阻止冒泡事件发生的语句

    时间触发时会执行两个步骤:1.捕获 2.冒泡,而很多浏览器包括jquery都不支持捕获动作所以只能执行冒泡动作. 所谓冒泡就是当点击就是事件的执行顺序,本人的理解为:但某一元素触发时间时它的祖先元素( ...

  4. jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...

  5. 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  6. 关于jquery stopPropagation()阻止冒泡事件

    我们经常会遇到点击两个或者多个重叠的层事件的时候,往往点击最里的的一层会接连触发外面的点击事件.这时候就需要用到stopPropagation事件即阻止冒泡事件html代码如下<!DOCTYPE ...

  7. jquery的冒泡事件event.stopPropagation()

    js中的冒泡事件与事件监听 冒泡事件 js中“冒泡事件”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的冒泡应该 说是交换更加准确:js ...

  8. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

  9. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

随机推荐

  1. 如何将jsp页面的table报表转换到excel报表导出

    假设这就是你的jsp页面: 我们会添加一个“导出到excel”的超链接,它会把页面内容导出到excel文件中.那么这个页面会变成这个样子 在此,强调一下搜索时关键词的重要性,这样一下子可以定位到文章, ...

  2. （七）理解angular中的module和injector，即依赖注入

    (七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54      阅读:63060      评论:1      收藏:0      [点 ...

  3. access数据库用sql语句添加字段，修改字段，删除字段

    用 Create Table 建立一个表 Table1 ,主键是自动编号字段,另一个字段是长度是 10 的文本字段. 代码如下:CREATE TABLE Table1 (Id COUNTER CONS ...

  4. BZOJ 1718: [Usaco2006 Jan] Redundant Paths 分离的路径

    Description 给出一个无向图,求将他构造成双连通图所需加的最少边数. Sol Tarjan求割边+缩点. 求出割边,然后缩点. 将双连通分量缩成一个点,然后重建图,建出来的就是一棵树,因为每 ...

  5. 39 网络相关函数(七)——live555源码阅读(四)网络

    39 网络相关函数(七)——live555源码阅读(四)网络 39 网络相关函数(七)——live555源码阅读(四)网络 简介 14)readSocket从套接口读取数据 recv/recvfrom ...

  6. ndk学习13: proc

    一.进程相关信息 /proc目录中包含许多以数字命名的子目录,这些数字表示系统当前正在运行进程的进程号,里面包含对应进程相关的多个信息文件 结构如下: 进程相关的信息如下: 部分信息如下 cmdlin ...

  7. 【Unity3D】使用鼠标键盘控制Camera视角（即时战略类游戏视角）：缩近，拉远，旋转

    今天写一个demo,要用到鼠标键盘控制三维视角,因此写了个脚本用于控制. 该脚本可以用于即时战略类游戏的视角,提供了缩进,拉伸,旋转.同时按住鼠标右键不放,移动鼠标可以实现第一人称视角的效果. usi ...

  8. 安装CentOS 7时出现No Caching mode page found问题的解决

    将CentOS 7镜像刻到U盘之后,向服务器安装时,使用U盘启动会出现两种启动选项,一种是UEFI启动选项,一种是默认的启动选项,如果不使用UEFI方式安装,那么一般是没有问题的,如果选择UEFI方式 ...

  9. gcc-5.4.0 static dwarf2 compile

    ------------------------------------------------------------------------------- 又开始折腾了, 静态编译 gcc-5.4 ...

  10. nyoj305_表达式求值

    表达式求值 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简单的函数求值,比如,它知道函数min ...