Angular 點擊事件不起作用<object>元素<div id="text_translate"><p>我正在使用 SVG map 划分為多個區域的交互式 map ，我正在嘗試捕獲一些單擊的元素（表示該區域的路徑元素）以應用它。</p><p> 我的 angular 組件具有以下模板：</p><pre> &lt;object type="image/svg+xml" data="/assets/img/regions_map.svg" (click)="handleRegionClick($event)"&gt;&lt;/object&gt;</pre><p> 對於 Ts 文件：</p><pre> export class RegionsMapComponent implements OnInit { constructor() { } ngOnInit() { } /** handle the click on the map*/ handleRegionCLick($event: MouseEvent) { console.log('hello'); } }</pre><p> 但是在這里點擊 map SVG 不會調用我的 function，所以我無法捕捉到要突出顯示的點擊區域的 ID。</p></div></object>

Question

我正在使用 SVG map 划分為多個區域的交互式 map ，我正在嘗試捕獲一些單擊的元素（表示該區域的路徑元素）以應用它。

我的 angular 組件具有以下模板：

<object type="image/svg+xml" data="/assets/img/regions_map.svg" (click)="handleRegionClick($event)"></object>

對於 Ts 文件：

export class RegionsMapComponent implements OnInit {

  constructor() { }
  ngOnInit() {
  }

  /** handle the click on the map*/
  handleRegionCLick($event: MouseEvent) {
    console.log('hello');
  }

}

但是在這里點擊 map SVG 不會調用我的 function，所以我無法捕捉到要突出顯示的點擊區域的 ID。

Answer 1

<object>標簽最初是為嵌入瀏覽器插件而設計的。 更一般地說，最好嵌入帶有<img>標簽的圖片（這與click事件配合得很好）：

<img src="/assets/img/regions_map.svg" (click)="handleRegionClick($event)" />