微信小程序阻止事件冒泡
wxml代码如下:
js
<!-- 第一种冒泡情况:点击父元素正常,点击子元素也会触发父元素上面的事件 -->
<view bind:tap="parentTap" style="width: 100%;height: 300rpx;background-color: pink;display: flex;align-items: center;justify-content: center;margin-top: 200rpx;">
<view bind:tap="childTap" style="background-color: red;width: 200rpx;height: 100rpx;text-align: center;line-height: 100rpx;">点击我</view>
</view>
<!-- 第二种不冒泡情况:点击父元素正常,点击子元素不会触发父元素上面的事件,只会触发子元素事件 -->
<!-- 只需要将子元素的 bind:tap 改成 catch:tap 即可 -->
<view bind:tap="parentTap" style="width: 100%;height: 300rpx;background-color: pink;display: flex;align-items: center;justify-content: center;margin-top: 200rpx;">
<view catch:tap="childTap" style="background-color: red;width: 200rpx;height: 100rpx;text-align: center;line-height: 100rpx;">点击我</view>
</view>
对应的js代码如下:
js
// index.js
Page({
parentTap: function() {
console.log('父元素被点击');
},
childTap: function() {
console.log('子元素被点击,父元素不触发');
}
});