小程序点击事件有两种bindtap和catchtap,前者不会阻止冒泡事件向上冒泡,后者则可以阻止向上冒泡。
1.事件分类:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
区分bindtap和catchtap示例代码:
<view bindtap="onclick1">
onclick1
<view catchtap="onclick2">onclick2</view>
<view bindtap="onclick3">onclick3</view>
</view>
Page({
onclick1:function(e){ //输出结果是:onclick1
console.log("onclick1")
},
onclick2: function (e) { //输出结果是:onclick2
console.log("onclick2")
},
onclick3: function (e) { //输出结果:onclick3 onclick1
console.log("onclick3")
},
})
2.列表item事件细节处理
一般在相应的Page定义中写上相应的事件处理函数(参数是event),都能满足需求。
但是,当item中view嵌套层级复杂且内层view不需要绑定事件时,点击item拿到对应的id就需要阻止向上冒泡事件。
我们都知道js中阻止冒泡事件方法:e.stopPropagation()
而小程序中微信对js部分高度封装,是没有上面的方法的,那若何才能阻止事件向上冒泡呢?
且看列子:
<template name="test">
<view bindtap = 'click1' data-postId="{{id}}">
<view>
<image src='../images/icon_logo.png'></image>
</view>
</view>
</template>
<block wx:for="{{testData}}" wx:for-item="item" wx:key="pro">
<template is="test" data="{{...item}}"></template>
</block>
page({
data:{
testData:[{id:'1',title:'Q'}],
click1: function(e){
wx.showToast({
// title: e.target.dataset.postid + "",//点到不同view层上,返回值不一样
title: e.currentTarget.dataset.postid + "",
})
}
}
})
分别点击外层和里层view时:e.target.dataset.postid结果分别是1和undefined;
分别点击外层和里层view时:e.currentTarget.dataset.postid结果分别是1和1;