角度点击事件在 <object> 元素中不起作用答案

【问题标题】：Angular click event doesn't work in <object> element角度点击事件在 <object> 元素中不起作用
【发布时间】：2022-02-04 23:35:12
【问题描述】：

我正在使用划分为多个区域的 SVG 地图制作交互式地图，我正在尝试捕获单击的元素（代表该区域的路径元素）以对其应用一些样式。

我的角度组件有以下模板：

<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');
  }

}

但是在这里点击地图 SVG 不会调用我的函数，所以我无法捕捉到要突出显示的点击区域的 Id。

【问题讨论】：

这能回答你的问题吗？ Click event doesn't execute on <object> tag

标签： javascript html css angular

【解决方案1】：

<object> 标签最初设计用于嵌入浏览器插件。更一般地说，最好嵌入带有<img> 标签的图片（这与click 事件配合得很好）：

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

【讨论】：

使用标签我将失去与 SVG 的子元素（如多边形和路径）的交互......点击源将是它自己的图像
然后直接使用SVG。