更新：

Question

我有一个基于角度的应用程序（目前为v4.4）。我有一个视图，组件在有限次数内显示自己的实例，然后在最低的＆＃34; child＆＃34;组件，有一个svg。

我希望能够使用(click)事件拾取已点击的最低组件。我认为我可能能够设置z-index链接到迭代编号，以便每个后续子组件出现在它的父级之上，因此当单击该区域中的任何位置时，会触发正确的事件。

我在plunkr上做了这个demo。您将看到单击svg不会触发单击的事件，但是单击框内的任何其他区域会导致该框的单击事件及其所有父项。

我希望能够独立切换所有盒子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的组件触发click事件。

Answer 1

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

在你的HTML中你必须有

(click)=clicked($event)

在你的.ts中添加你的stopPropagation：

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>

Answer 2

event.stopPropagation();位于子元素的点击处理程序的顶部。您可能需要将此添加到mousedup / down等的其他事件处理程序。

你也可以试试css：父母#parentElement { pointer-events: none; }，和关于子元素的.childElement { pointer-events: auto; };

并将id和class name分别添加到父级和子级。

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

更新：

2 个答案: