点击没有触发父组件的点击事件父组件上的点击事件

Question

我有一个基于角度的应用程序（当前版本为v4.4）。我有一个视图，一个组件在有限次数的情况下显示它自己的一个实例，然后在最低的“子”组件中有一个svg。

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

我在plunkr上做了这个demo。你会看到点击svg不会触发点击事件，但点击框内的任何其他区域，会导致该框的点击事件以及它的所有父母。

我希望能够独立地切换所有框的背景颜色。

这里是我的部件有：

@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) 
    } 
} 

UPDATE：

目前的答案回答这个问题的第一部分，但不与SVG点击不触发点击事件处理显示svg的组件。

Answer 1

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

你也可以尝试的CSS： #parentElement { pointer-events: none; }父，并 .childElement { pointer-events: auto; }的子元素;

并分别将ID和类名添加到父项和子项。

Answer 2

我成功地在你的抢劫者身上做到了。你必须在你cliked函数的顶部使用event.stopPropagation（），但你也必须加上$事件在点击动作，就像这样：

在你的HTML

你必须有

(click)=clicked($event) 

在your.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>