在vue和uni中.stop阻止事件冒泡失败？

最新推荐文章于 2024-08-11 13:28:19 发布

HHHHH2187

最新推荐文章于 2024-08-11 13:28:19 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/HHHHH2187/article/details/133668501

版权

1问题:

直接看代码

<u-cell-item @click='clickItem(item.title,index)' :title="item.title" arrow-direction="down" :arrow="false"
				v-for="(item,index) in phrases" :key="index">
				<u-icon v-if="show" @click.stop="handleClick()" slot="right-icon" size="50" custom-prefix="custom-icon"
					name="changyonggoupiaorenshanchu"></u-icon>
			</u-cell-item>

这里我是使用uview的组件行里面插了icon但是单独点击icon会发现同时触发了u-cell-item的事件。

但是我发现使用stop并没有直接阻止的事件冒泡。

于是我查看uniapp的文档，结果发现依旧报错event.stopPropagation is not a function"2解决：

这时候我们可以使用.native事件修饰符，在父组件中给子组件绑定一个原生事件，native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符，可以将原生事件绑定到组件的根元素上。

<u-icon v-if="show" @click.native.stop="handleClick()" slot="right-icon" size="50" custom-prefix="custom-icon"
					name="changyonggoupiaorenshanchu"></u-icon>