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

事件冒泡

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

bind事件名

eventBind.wxss

.one{
    width: 300px;
    height: 300px;
    background: #96c24e;
}
.two{
    width: 200px;
    height: 200px;
    background-color: #bec936;
}
.three{
    width: 100px;
    height: 100px;
    background-color: #f97d1c;
}

eventBind.js

Page({
	_handlerOne:function(){
        console.log("one");
    },
    _handlerTwo:function(){
        console.log("Two");
    },
    _handlerThree:function(){
        console.log("Three");
    }
})

eventBind.wxml

<text>事件的冒泡</text>
<view class="one" bindtap="_handlerOne">one
    <view class="two" bindtap="_handlerTwo">two
        <view class="three" bindtap="_handlerThree">three</view>
    </view>
</view>

当点击three层时：

事件会冒泡到two层和one层：

阻止事件冒泡

catch事件名

eventBind.wxml

<text>事件的冒泡</text>
<view class="one" bindtap="_handlerOne">one
    <view class="two" catchtap="_handlerTwo">two
        <view class="three" bindtap="_handlerThree">three</view>
    </view>
</view>

当点击three层时：

事件向父组件冒泡，冒泡到two层时被阻止。

事件捕获

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用:

capture-bind:事件名

eventBind.wxml

<view class="one" capture-bind:tap="_handlerOne">one
    <view class="two" capture-bind:tap="_handlerTwo">two
        <view class="three" capture-bind:tap="_handlerThree">three</view>
    </view>
</view>

当点击three层时：

事件捕获开始，从被点击的父组件执行到该被点击的元素：

中断事件捕获

capture-catch:事件名

capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

eventBind.wxml

<view class="one" capture-bind:tap="_handlerOne">one
    <view class="two" capture-catch:tap="_handlerTwo">two
        <view class="three" capture-bind:tap="_handlerThree">three</view>
    </view>
</view>

当点击three层：

事件在two层被中断：