做项目遇见的问题:
当你点击按钮触发事件后,当前用户和目标用户ID相同时,直接return,但是renturn时如何保证:
整个界面的触发函数是toDetailsTap,点我私聊按钮的触发函数是handleChat,如何保证点击按钮,并且renturn时,不会触发toDetailsTap
<view class="chat-button"data-url="../chat/chat?targetUserId={{item.memberId}}" bindtap="handleChat">
点我私聊</view>
解决办法:
可以使用
catchtap
替代bindtap
来绑定按钮的点击事件。catchtap
会阻止事件向上冒泡,而bindtap
不会
<view class="chat-button" data-url="../chat/chat?targetUserId={{item.memberId}}"catchtap="handleChat"> 点我私聊 </view>
handleChat: function(e) {// 获取当前用户IDlet userId = wx.getStorageSync('userInfo').id;// 获取目标用户IDconst targetUserId = e.currentTarget.dataset.url.split('targetUserId=')[1].split('&')[0];// 如果当前用户和目标用户ID相同,则显示提示并返回if(userId == targetUserId){wx.showToast({ title: '自己不能和自己私聊哦~',icon: 'none',duration: 2000});return;}else{// 如果不相同,则跳转到私聊页面const url = e.currentTarget.dataset.url; wx.navigateTo({url: url });}
},
总结:
在微信小程序中,
catchtap
和bindtap
是两种不同的事件绑定方式:
bindtap:使用
bindtap
时,事件将被绑定到当前组件上,并且事件不会冒泡到父组件。换句话说,当你在一个子组件上使用bindtap
时,点击事件只会在该子组件上触发,不会向父组件传递。catchtap:使用
catchtap
时,事件将被绑定到当前组件上,并且事件会冒泡到父组件。但是,使用catchtap
绑定的事件处理函数如果返回false
,可以阻止事件向上冒泡,即事件不会传递到父组件。因此,当你需要在子组件上绑定点击事件,并且不希望事件冒泡到父组件时,可以使用
catchtap
。而如果你希望事件能够冒泡到父组件,可以使用bindtap
。