如果单击子 angular2，如何停止父请求

Question

我有类似下面的代码，我希望如果我点击子项 Div，那么不应触发父项 Div 单击事件。

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

当我点击“childDiv”时，它首先触发“parentDiv()”事件，然后是“childDiv()”事件。

你能帮我解决一下吗？

提前致谢

Answer 1

这是你需要的地方event.stopPropagation();

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

和

childDiv(event) {
 event.stopPropagation();
}

在您的案例中发生的事情称为事件传播。

当您单击子项 div 时，单击事件会传播到父项 div。你需要停止传播。

以上是方法。

或者如果你想要一个单行解决方案，它

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

Answer 2

在附加到 .childDiv

的函数中使用 event.stopPropagation();

在Javascript中有一个叫做事件冒泡的东西；当一个事件为一个元素触发时，它也会为它的所有父元素触发。

这是显示所需代码的代码片段

document.getElementById("parentDiv").addEventListener("click", function (e){
  alert('parentDiv clicked');
});

document.getElementById("childDiv").addEventListener("click", function (e){
  e.stopPropagation();
  alert('childDiv clicked');
});

<div id="parentDiv">
  Parent Container
   <div id="childDiv">Child Container</div>
</div>

Answer 3

Stopping bubbling

冒泡事件从目标元素直接向上。一般向上到<html>，然后到document object，有的事件甚至到window，调用路径上的所有handler。

但是任何处理程序都可以决定事件已完全处理并停止冒泡。

它的方法是event.stopPropagation()。

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

演示版

function parentDiv() {
  alert('parent div')
}

div {
  cursor: pointer;
}

<div class="parentDiv" onclick="parentDiv()">Parent Div
  <div class="childDiv" onclick="event.stopPropagation()">Child Container</div>
</div>

如果单击子 angular2，如何停止父请求

how to stop parent request if clicked child angular2

javascript

typescript

angular2-template

angular

Stopping bubbling