Javascript 单击子组件而不在父组件上触发clicked事件

我有一个基于角度的应用程序，目前是v4.4。我有一个视图，其中一个组件显示其自身的一个实例有限次，然后在最低的子组件中，有一个svg

我希望能够使用click事件拾取已单击的最低组件。我认为我可能能够设置z索引以链接到迭代编号，这样每个后续子组件都会显示在其父组件的顶部，因此当单击该区域中的任何位置时，就会触发正确的事件

这是我在普伦克上做的。您将看到，单击svg不会触发clicked事件，但单击框内的任何其他区域会导致该框及其所有父对象的clicked事件

我想能够切换所有框abckground颜色独立

以下是我拥有的组件：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-child [iteration]="0"></my-child>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@Component({
  selector: 'my-child',
  template: `
    <div class="border" [style.background]="toggle ? 'green' : 'pink'" (click)="clicked()">
    {{iteration}}
      <my-child [iteration]="iteration" *ngIf="iteration < 3"></my-child>
      <object *ngIf="iteration == 3" 
      id="img" width="300" height="300"
      data="http://snapsvg.io/assets/images/logo.svg"></object>
    </div>
  `,
})
export class Child {
  name:string;
  @Input() iteration;
  toggle: boolean;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
    this.toggle = false;
  }
  ngOnInit() {
    ++this.iteration;
  }
  clicked(){
    this.toggle = !this.toggle;
    console.log(this.iteration)
  }
}

更新： 当前答案回答了此问题的第一部分，但不涉及svg单击，不为显示svg的组件触发单击事件。

event.stopPropagation；在子元素的click处理程序的顶部。您可能需要将其添加到mousedup/down等的其他事件处理程序中

您也可以尝试css： 父元素上的parentElement{指针事件：无；}，以及 .childElement{指针事件：auto；}在子元素上

并将id和类名分别添加到父级和子级。

event.stopPropagation；在子元素的click处理程序的顶部。您可能需要将其添加到mousedup/down等的其他事件处理程序中

您也可以尝试css： 父元素上的parentElement{指针事件：无；}，以及 .childElement{指针事件：auto；}在子元素上

---

并将id和类名分别添加到父级和子级。

我成功地在您的Plunk中完成了此操作。您必须在click函数的顶部使用event.stopPropagation，但还必须在单击操作中添加$event，如下所示：

在你的html中，你必须有

(click)=clicked($event)

在您的.ts中添加您的停止播放：

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

编辑： 最后一层的解决方案是在svg元素顶部使用一个不可见的div，您可能需要调整样式或位置

<div style="width:300px; height:300px; position:absolute; z-index:1000">
</div>
<object *ngIf="iteration == 3" 
      id="img" width="300" height="300"
      data="http://snapsvg.io/assets/images/logo.svg">
</object>

---

我成功地做到了这一点。您必须在click函数的顶部使用event.stopPropagation，但还必须在单击操作中添加$event，如下所示：

在你的html中，你必须有

(click)=clicked($event)

在您的.ts中添加您的停止播放：

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

编辑： 最后一层的解决方案是在svg元素顶部使用一个不可见的div，您可能需要调整样式或位置

<div style="width:300px; height:300px; position:absolute; z-index:1000">
</div>
<object *ngIf="iteration == 3" 
      id="img" width="300" height="300"
      data="http://snapsvg.io/assets/images/logo.svg">
</object>

---

你尝试过css解决方案吗？当您只需要子事件触发器时，父级的指针事件可以为“无”。@EmadEmami我希望触发角度事件，因为我最终希望使用单击组件的迭代值来进行导航。您尝试过css解决方案吗？当您只需要子事件触发器时，父级的指针事件可以为“无”。@EmadEmami我希望触发角度事件，因为我最终希望使用单击组件的迭代值用于导航。答案不完全正确，请在单击操作中使用我的答案，而使用$event参数；如果您将StopRopAgation放入现有的click处理程序中，则不需要创建额外的处理程序。.我仍然面临单击svg而不注册子组件3（包含svg的组件）的问题？答案并不完全正确，请在单击操作中使用我的答案，而使用$event参数；如果您将stopPropagation放在现有的click处理程序中，则不需要创建额外的处理程序。.我仍然面临着单击svg而没有注册单击子组件3（包含svg的组件）的问题？谢谢！这解决了大部分问题，但我仍然面临着点击svg时没有注册点击子组件3的问题，即包含svg的组件-通过您的修改看到这一点是的，我可以看到您不能点击svg，如果您想这样做，您有两种可能：使用ElementRef在DOM元素上添加点击监听器，然后使用或使用id获取svg元素。另一个可能性是在对象前面的绝对位置添加一个300px 300px div：谢谢！这解决了大部分问题，但我仍然面临着点击svg时没有注册点击子组件3的问题，即包含svg的组件-通过您的修改看到这一点是的，我可以看到您不能点击svg，如果您想这样做，您有两种可能：使用ElementRef在DOM元素上添加点击监听器，然后使用或使用id获取svg元素。另一种可能性是在对象之前的绝对位置添加一个300px 300px div：