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

Question

I have an angular based appication (currently v4.4). I have a view where a component displays an instance of itself for a finite number of times and then in the lowest "child" component, there is an svg.

I want to be able to pickup the lowest component that has been clicked using the (click) event. I thought that I might be able to setup the z-index to link to the iteration number so that each subsequent child component appears on top of it's parent, so when anywhere in that area is clicked, the correct event is fired.

I have made this demo on plunkr. You will see that clicking on the svg does not fire the clicked event, but clicking on any other area inside the boxes, causes the clicked event for that box and all it's parents.

I would like to be able to toggle all boxes abckground colors independantly.

Here are the components I have:

@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:

The current answers answer the first part of this question, but don't deal with the svg click not firing the click event for the component that displays the svg.

Answer 1

I succeed to did it in your plunker. You have to use event.stopPropagation() at the top of your cliked function, but you also have to add the $event in your click action, like this :

in your html you must have

(click)=clicked($event)

in your.ts add your stopPropagation :

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

EDIT : The solution for your last layer, using an invisible div on top of the svg element, you might need to adapt the style or position.

<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(); at the top of the child element's click handler. You may need to add this to other event handlers for mousedup/down ect.

Also you could try css: #parentElement { pointer-events: none; } #parentElement { pointer-events: none; } on the parent, and .childElement { pointer-events: auto; } .childElement { pointer-events: auto; } on the child elements;

and add the id and class name to the parent and children respectively.