在 pages 下的 index.wxml 文件里面写主体框架
<view class='view1' bindtap='view1Click' id='view1' data-title='自己可以添加的数据' data-id='100'>
爷爷
<view class='view2' bindtap='view2Click'>
父亲
<view class='view3' bindtap='view3Click' id='view3'>
儿子
</view>
</view>
</view>
绑定相同的事件点击 view3 的时候会触发 view2 和 view1
如果想阻止冒泡在 view3 上用 catchtap 事件来绑定就好了
在 pages 下的 index.js文件里面设置操作逻辑
//事件处理函数
// 说说 event 里面几个重要的属性 currentTarget 绑定事件 target 可以查看到时触发事件源,其中在
currentTarget 里面有个属性叫 dataset 可以显示自己手动添加的数据例如 data-title = '我是标题' 最后
"我是标题" 会在 dataset 中显示出来
view1Click :function(event){
console.log('view1Click');
console.log(event);
},
view2Click :function(){
console.log('view2Click')
},
view3Click :function(event){
console.log('view3Click');
console.log(event)
},
在 pages 下的 index.wxss 文件里面设置样式
.view1{
height:500rpx;
width:100%;
background-color: red;
}
.view2{
height:300rpx;
width:80%;
background-color: green;
}
.view3{
height:100rpx;
width:50%;
background-color: yellow;
}