点击表格中按钮触发自身事件以及上级事件问题

最新推荐文章于 2021-12-11 16:15:59 发布

转载最新推荐文章于 2021-12-11 16:15:59 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cd3be686fb9a032484d7f53

本文介绍在使用iView组件库的Table表格时，如何解决点击按钮时触发额外行点击事件的问题。通过在按钮点击事件中使用event.stopPropagation()，可以有效避免事件冒泡，确保只触发预期的事件。

使用的是iView组件库的Table表格

在表格中操作一列有删除和修改按钮，分别给删除和修改按钮注册了点击事件，但是同时还给表格的每一行注册了点击事件（项目需要在点击每一行时显示当前的详情信息），之后就发生了在点击删除和修改按钮时，不仅触发删除和修改按钮绑定的点击事件，还触发了给每一行注册的显示详情信息的事件。

// 点击删除按钮
delectTableData(nowid) {
	   event.stopPropagation();
	   this.$Modal.confirm({
		     title: "删除提示",
		     content: "<p>确定要删除吗？</p>",
		     // 确定删除
		     onOk :async () => {
		       const { data: res } = await this.$http.delete(
		           "xxxx" + id
		       );
		       if (res.code !== 200) {
		           return this.$Message.error("删除失败");
		       } else {
		         this.$Message.success("删除成功");
		       }
		     }
	   });
 },
复制代码

在删除按钮事件里面添加event.stopPropagation();，来阻止事件冒泡就可以解决了。

转载于:https://juejin.im/post/5cd3be686fb9a032484d7f53