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)" />