解决Angular父子元素点击事件冒泡，实现各自触发对应函数

嘿，这问题我熟！这是典型的事件冒泡搞的鬼😉。当你点击按钮时，浏览器的事件流会从按钮这个目标元素开始，一路向上冒泡到它的所有父元素，所以父元素.icon上绑定的clickIcon()自然也会被触发。

解决方案：阻止事件冒泡 #

咱们只需要在按钮的点击事件里，阻止事件继续向上传播就行，Angular里有两种简单的实现方式：

方法1：模板里直接搞定

直接在按钮的点击绑定里，调用$event.stopPropagation()来阻止冒泡：

<button (click)="clickBtn(); $event.stopPropagation()">Action 1</button>

方法2：函数里统一处理

先给clickBtn()加上事件参数，在函数内部阻止冒泡：

clickBtn = (event) => { 
  // 先阻止事件向上冒泡
  event.stopPropagation();
  console.log("btn click") 
}

然后模板里把事件传进去：

<button (click)="clickBtn($event)">Action 1</button>

修改后的完整代码示例 #

下面是调整好的完整代码，直接用就行：

JavaScript部分

clickBtn = (event) => { 
  event.stopPropagation();
  console.log("btn click") 
}
clickIcon = () => { console.log("img click") }

CSS部分

.icon {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.icon>.buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  padding: 10px;
  background-color: rgba(50, 50, 50, 0.7);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: all 0.3s ease;
}
.icon:hover>.buttons {
  opacity: 1;
}

HTML部分

<div class="icon" (click)="clickIcon()">
  <div id="folderView">
    <i class="fa fa-folder" aria-hidden="true" style="font-size: 3em; color: #ddc808;"></i>
    <p>Folder</p>
  </div>
  <div class="buttons">
    <button (click)="clickBtn($event)">Action 1</button>
  </div>
</div>

这样改完之后，点击按钮只会触发clickBtn()，点击图标区域（非按钮的部分）会正常触发clickIcon()，完全符合你想要的效果！

内容的提问来源于stack exchange，提问作者Deep