微信小程序自定义组件阻止click事件冒泡

怎么说呢,官方没有找到类似js的阻止冒泡的方法,网上的 stopPropagationreturn false全部阵亡。

不过可以通过 catch:tap 代替 bind:tap 可是,如果我的场景是这样子,该怎么办呢:

写了一个img组件。这个组件有一个预览参数,点击img后进入组件内部事件预览图片。
但是在其他场景,这个img只是为了显示一个ico,需要在页面上点击后做跳转怎么办。

这个时候只能找到能够在img自定义组件中的阻止冒泡的事件。

最终在官方文档找到了一线生机,就是我先使用catch:tap,然后在处理在这里插入代码片函数中手动发射tap事件。注意需要设置允许冒泡。

完整代码

<image catch:tap="click"></image>
function click(event){
	if (!this.data.preview) {
		var myEventDetail = {} // detail对象,提供给事件监听函数
		var myEventOption = { bubbles: true } // 触发事件的选项
		this.triggerEvent('tap', myEventDetail, myEventOption)
		return;
	}
	wx.previewImage({
		urls: [this.data.fullSrc],
 	})
}

参考的微信小程序官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值