微信小程序的事件冒泡处理-不要太简单-GIF图解

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

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

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

bind+事件名  不阻止冒泡
catch+事件名 阻止冒泡

index.wxml

<view class="outer box1" bindtap="outerHandle">
  外
  <view class="center box1" catchtap="centerHandle">
  中
    <view class="inner box1" bindtap="innerHandle">内</view>
  </view>
</view>

 index.js

  outerHandle(){
    console.log(1,'外')
  },
  centerHandle(){
    console.log(2,'中')
  },
  innerHandle(){
    console.log(3,'内')
  }

index.wxss

.box1{
  padding: 40px;
}
.outer{
  background-color: rgba(0, 72, 255, 0.57);
}
.center{
  background-color: rgba(255, 0, 0, 0.714);
}
.inner{
  background-color: rgba(0, 128, 0, 0.645);
}