微信小程序-小程序事件冒泡和事件捕获

!> 小程序当中的时间捕获与时间冒泡与原生JS的是一样的

这里我就来直接上代码来演示一下在微信小程序当中的时间冒泡与捕获，关于时间的捕获与冒泡可以参考我JS文章里面的介绍即可。

事件捕获

index.wxml:

<view class="one" capture-bind:tap="onOneClick">
    <view class="two" capture-bind:tap="onTwoClick">
        <view class="three" capture-bind:tap="onThreeClick">
        </view>
    </view>
</view>

index.js:

onOneClick: function() {
  console.log('捕获:onOneClick');
},
onTwoClick: function() {
  console.log('捕获:onTwoClick');
},
onThreeClick: function() {
  console.log('捕获:onThreeClick');
},

事件冒泡

index.wxml:

<view class="one" bind:tap="onOneClick1">
    <view class="two" bind:tap="onTwoClick1">
        <view class="three" bind:tap="onThreeClick1">
        </view>
    </view>
</view>

index.js:

onOneClick1: function() {
  console.log('冒泡:onOneClick1');
},
onTwoClick1: function() {
  console.log('冒泡:onTwoClick1');
},
onThreeClick1: function() {
  console.log('冒泡:onThreeClick1');
},

事件捕获与冒泡

index.wxml:

<view class="one" capture-bind:tap="onOneClick" bind:tap="onOneClick1">
    <view class="two" capture-bind:tap="onTwoClick" bind:tap="onTwoClick1">
        <view class="three" capture-bind:tap="onThreeClick" bind:tap="onThreeClick1">
        </view>
    </view>
</view>

阻止事件冒泡与捕获

• catch：阻止冒泡事件
• capture-catch：阻止捕获事件

catch:

index.wxml:

<view class="one" bind:tap="onOneClick1">
    <view class="two" catch:tap="onTwoClick1">
        <view class="three" bind:tap="onThreeClick1">
        </view>
    </view>
</view>

可以看到从，three 开始 到 two 就已经结束了，说明在 two 这一层就阻止在继续往上传递了所以one就触发不了。

capture-catch：

index.wxml:

<view class="one" capture-bind:tap="onOneClick">
    <view class="two" capture-catch:tap="onTwoClick">
        <view class="three" capture-bind:tap="onThreeClick">
        </view>
    </view>
</view>

可以看到从，one 开始 到 two 就已经结束了，说明在 two 这一层就阻止在继续往下传递了所以three就触发不了。