Stopping bubbling

Question

我有类似下面的代码，我想要如果我点击Child Div，那么不应该触发Parent 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时，click事件将传播到父div。你需要停止传播。

以上是这样做的方法。

或者，如果您想要一行解决方案

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

Answer 2

在event.stopPropagation();

附带的功能中使用.childDiv

在Javascript中有一个叫做Event Bubbling的东西;当一个事件触发一个元素时，它也会触发所有它的父元素。

下面是显示所需代码的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Stopping bubbling

冒泡事件直接从目标元素开始。通常它会向上移动到<html>，然后到文档对象，有些事件甚至到达窗口，调用路径上的所有处理程序。

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

它的方法是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

3 个答案:

Stopping bubbling