微信小程序—事件冒泡/阻止事件冒泡（bindtap/catchtap）（图文）

微信小程序—事件冒泡/阻止事件冒泡（bindtap/catchtap）

事件冒泡
嵌套关系，每个都有一个类名一个点击事件
1、

  view1
  
    view2
    
      view3
    
  

2、写css样式

.view1{
  width: 100%;
  height: 500rpx;
  background: red;
}
.view2{
  width: 100%;
  height: 300rpx;
  background: yellow;
  margin-top: 50rpx;
}
.view3{
  width: 100%;
  height: 100rpx;
  background: blue;
  margin-top: 50rpx;
}

效果如下：

3、在js写事件

view1: function (e) {
    console.log('view1', e)
  },
  view2: function (e) {
    console.log('view2',e)
  },
  view3: function (e) {
    console.log('view3',e)
  },

点击view3，最内侧的，看console.log

三个点击事件都被触发了，这就是事件冒泡

阻止事件冒泡
把bindtap换成catchtap就是在拦截事件冒泡，

  view1
  
    view2
    
      view3
    
  

我只换了view2，看一下点击view3的效果

到了view2就被拦截了，不会往外冒泡到view1，如果想阻止冒泡，全部换成bindtap即可