微信小程序冒泡事件及其阻止

       点击事件：tap

       长按事件：longtap

       触摸事件：touchstart； touchend；touchcancel；touchmove

       其他：input；submit....

  前三类是冒泡事件，其他的称为非冒泡事件

wxml代码

<!--index.wxml-->
<!-- <view class='view1' bindtap='cli1'>111
  <view class='view2' bindtap='cli2'>222
     <view class='view3' bindtap='cli3'>333</view>
  </view>
</view> -->
<view class='view1' catchtap='cli1'>111
  <view class='view2' catchtap='cli2'>222
     <view class='view3' catchtap='cli3'>333</view>
  </view>
</view>

wxss代码

.view1{
    width: 500px;
    height: 500px;
    background: green;
}
.view2{
    width: 300px;
    height: 300px;
    background: red;
}
.view3{
    width: 100px;
    height: 100px;
    background: blue;
}

wxjs代码

//事件处理函数
cli1:function(){
console.log('view1')
},
cli2: function () {
    console.log('view2')
},
cli3: function () {
    console.log('view3')
},

冒泡事件的机制是点击最里层的三个盒子 先打印view3 依次是view2 view1，点击第二层盒子打印view2 view1

阻止冒泡事件的发生，直接把bindtap改为catchtap。点击不触发父盒子元素