點擊svg時，角度事件不會觸發

我有一個基於角度（4）的web應用程序，基於@angular/material的卡片視圖。嵌入在卡片視圖的內容中的是一個子組件，其僅將svg顯示爲<object>。點擊svg時，角度事件不會觸發

這是該卡的樣子：

<md-card (click)="onSelect(line)"> 
    <md-card-content (click)="onSelect(line)"> 
     <app-line-overview [line]="line"></app-line-overview> 
    </md-card-content> 
    <md-card-footer> 
     <h2>{{line.name}}</h2> 
     <h3>OEE: {{line.oee}}</h3> 
    </md-card-footer> 
</md-card>

的問題是，如果我在SVG圖像上單擊(click)事件不起作用（大概是因爲它是在卡圖的頂部？），但如果我點擊svg，事件就會觸發。

我試着給css加入md-card { z-index: 999 }，但沒有區別。我如何確保點擊卡片內的任何位置都能點擊事件，而不管內部有什麼內容？

來源

2017-07-29 George Edwards

也許寫上點擊收聽者的指令，將有助於：

@Directive({ 
    selector: '[clickInside]' 
}) 
export class ClickInsideDirective { 
    constructor(private elementRef: ElementRef) { 
    } 

    @Output() 
    public clickInside = new EventEmitter<Event>(); 


     @HostListener('click', ['$event', '$event.target']) 
      public onClick(event: MouseEvent, targetElement: HTMLElement): void { 
       if (!targetElement) { 
        return; 
       } 

       const clickedInside = this.elementRef.nativeElement.contains(targetElement); 
       if (clickedInside) { 
        this.clickOutside.emit(event); 
       } 
      } 
    ... 
}

使用

<md-card (clickInside)="onSelect(line)">

來源

2017-07-29 12:46:53 Vega

點擊svg時，角度事件不會觸發

回答

相關問題