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

859 阅读1分钟

使用的是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();,来阻止事件冒泡就可以解决了。