vue3事件的相互影响，如何解决？

Question

如何让上面两个事件互不影响
一个是行点击事件
一个是按钮点击事件
麻烦指正一下

Answer 1

是因为冒泡与事件捕获造成的:

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止**元素及其子元素的所有点击事件的默认行为，**而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

可以两个事件都加上.self