微信小程序（11）：冒泡事件与非冒泡事件

旧城等待， 2023-01-04 13:25 172阅读 0赞

事件分为冒泡事件和非冒泡事件：

*  冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
 *  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

**1. 冒泡事件：**

index.wxml 文件代码：

index.js 文件代码：

outTap:function(){ 
        console.log("this is outTap");
      },
    
      innerTap:function(){ 
        console.log("this is innerTap");
      },
    
      itemTap:function(){ 
        console.log("this is itemTap");
      },

index.wxss 文件代码：

.out{ 
      width: 500rpx;
      height: 500rpx;
      background-color: red;
    }
    .inner{ 
      width: 300rpx;
      height: 300rpx;
      background-color: pink;
    }
    .item{ 
      width: 100rpx;
      height: 100rpx;
      background-color: powderblue;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

*  当我点击蓝色块时：  
    ![在这里插入图片描述][20210110115310211.png]
 *  当我点击粉色块时：  
    ![在这里插入图片描述][20210110115337438.png]
 *  当我点击红色块时：  
    ![在这里插入图片描述][20210110115400149.png]  
    **2. 非冒泡事件**

与 bind 不同， catch 会阻止事件向上冒泡。

将下图箭头所指 bindtap 改为 catchtap  
![在这里插入图片描述][2021011011551674.png]  
点击各个色块时候的打印结果为：

![在这里插入图片描述][20210110115625575.png]  
![在这里插入图片描述][20210110115633579.png]  
![在这里插入图片描述][20210110115641929.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221119/084e3483c6eb40efa9fcf3cd42cdc4e7.png
[20210110115310211.png]: /images/20221119/b45173090e3248debe947e625925544f.png
[20210110115337438.png]: https://img-blog.csdnimg.cn/20210110115337438.png
[20210110115400149.png]: https://img-blog.csdnimg.cn/20210110115400149.png
[2021011011551674.png]: https://img-blog.csdnimg.cn/2021011011551674.png
[20210110115625575.png]: https://img-blog.csdnimg.cn/20210110115625575.png
[20210110115633579.png]: https://img-blog.csdnimg.cn/20210110115633579.png
[20210110115641929.png]: https://img-blog.csdnimg.cn/20210110115641929.png