做项目遇见的问题:
当你点击按钮触发事件后,当前用户和目标用户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) {
// 获取当前用户ID
let userId = wx.getStorageSync('userInfo').id;
// 获取目标用户ID
const 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
。