Angular2中点击子元素时阻止父元素点击事件触发的方法

嘿，这个问题是典型的事件冒泡在搞鬼——浏览器默认会把事件从触发的子元素向上传递到父元素，所以你点击childDiv时，父元素的parentDiv()也会跟着被触发。这里有两种简单直接的解决办法：

方法一：在模板中直接阻止冒泡 #

修改子元素的点击事件，调用$event.stopPropagation()来中断事件的向上传递：

<div class="parentDiv" (click)="parentDiv()"> 
  <div class="childDiv" (click)="childDiv(); $event.stopPropagation()">Child Container</div> 
</div>

$event是Angular自动传递的鼠标事件对象，stopPropagation()方法会直接阻止事件继续冒泡到父元素，这样点击子元素就只会触发childDiv()了。

方法二：在组件方法中处理阻止冒泡 #

如果你的childDiv()方法有复杂逻辑，也可以把事件对象传进去，在方法里统一处理阻止冒泡：

模板代码： #

<div class="parentDiv" (click)="parentDiv()"> 
  <div class="childDiv" (click)="childDiv($event)">Child Container</div> 
</div>

组件TS代码： #

childDiv(event: MouseEvent) {
  // 这里写你的子元素点击逻辑
  console.log('子元素被点击');
  // 阻止事件冒泡到父元素
  event.stopPropagation();
}

两种方法都能完美解决问题，选哪种取决于你的代码结构——如果逻辑简单，模板里直接写更快捷；如果逻辑复杂，放在方法里会更清晰易维护。

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