微信小程序编写如下要求的程序: 绑定并阻止事件冒泡: 定义三层view,inner view、middle view、outer view,并绑定事件,点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1,在控制台通过日志输出观看效果。
时间: 2024-02-01 22:14:32 浏览: 14
可以按照以下步骤实现:
1. 在微信小程序开发工具中创建一个新的小程序项目。
2. 在 wxml 文件中添加以下代码:
```html
<view class="outer" bindtap="handleTap1" catchtap="stopPropagation">
<view class="middle" bindtap="handleTap2" catchtap="stopPropagation">
<view class="inner" bindtap="handleTap3"></view>
</view>
</view>
```
3. 在 wxss 文件中添加以下样式:
```css
.outer {
width: 300rpx;
height: 300rpx;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.middle {
width: 200rpx;
height: 200rpx;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100rpx;
height: 100rpx;
background-color: #ccc;
}
```
4. 在 js 文件中添加以下代码:
```javascript
Page({
handleTap1: function () {
console.log('handleTap1');
},
handleTap2: function () {
console.log('handleTap2');
},
handleTap3: function () {
console.log('handleTap3');
},
stopPropagation: function () {
return false; // 阻止冒泡
}
})
```
这样就完成了绑定并阻止事件冒泡的程序。可以在控制台中观察点击不同的 view 时的输出结果。