至尊技术网 - 事件冒泡 https://www.zzwws.cn/tag/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1/ zh-CN Wed, 07 Sep 2022 14:10:00 +0800 Wed, 07 Sep 2022 14:10:00 +0800 微信小程序的事件冒泡和捕获 https://www.zzwws.cn/archives/6363/ https://www.zzwws.cn/archives/6363/ Wed, 07 Sep 2022 14:10:00 +0800 悠悠楠杉 事件冒泡

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

bind事件名

<text>事件的冒泡</text>
<view class="one" bindtap="handlerOne">one
    <view class="two" bindtap="handlerTwo">two
        <view class="three" bindtap="handlerThree">three</view>
    </view>
</view>

阻止事件冒泡

catch事件名

<text>事件的冒泡</text>
<view class="one" bindtap="handlerOne">one
    <view class="two" catchtap="handlerTwo">two
        <view class="three" bindtap="handlerThree">three</view>
    </view>
</view>

事件捕获

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

capture-bind:事件名

<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>

阻止事件捕获

capture-catch:事件名

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

<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>

]]>
0 https://www.zzwws.cn/archives/6363/#comments https://www.zzwws.cn/feed/tag/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1/