为什么不支持Firefox和Safari以及Internet Explorer中的单击处理程序事件SVG元素？

Question

Web应用程序

它是一个基于网络的查找地图游戏网站，使用Angular 4构建。它有各种选择游戏模式，并根据选择模式运行，也可以选择/选择或只选择一个区域，然后填充国家名称以查找每个周期。

什么应该是正确的行为

*所有数据都来自SVG文档

1. 页面加载后 - 选择['新游戏'，'成就'，'高分数']的选项
2. 选择游戏模式['学习'，'经典'，'时间']
3. 选择区域（一个或多个）然后按播放来玩游戏
4. 显示SVG地图和名称以从SVG中随机查找国家/地区
5. 点击一个国家然后如果用户点击了正确的国家通知'正确'，如果没有通知将是'不正确'（有逻辑可以计算正确/不正确的点）
6. 移动下一个国家查找（然后重复步骤5）
7. 结束游戏
8. 它应该适用于主要的浏览器（Chrome，Firefox，Safari，Edge，Internet Explorer）

游戏模式

• LearningMode =总是重复游戏
• ClassicMode =只运行一次并结束
• TimeMode =有一个时间限制来完成游戏结束

这是一个处理click事件的部分代码

public handleClickEvent(event: any): void {
  if (this.gameStarted && event.path && event.path.length > 0) {
    const country = event.path[0].id;
    if (
      country !== null &&
      country !== 'europeanMap' &&
      country !== 'image97'
    ) {
      this.runGameLogic(country);
    }
  }
}

游戏运行逻辑

// The user clicked on the map, so run game logic on that

  private runGameLogic(selectedCountryName: string): void {
    const index = this.selectedCountries.findIndex(country => {
      return country.name === this.countryToFind.name;
    });
    this.selectedCountries[index].selected = true;
    // Only run logic if the game has started, there is a valid countryName object, and that object is not equal to an empty string
    if (selectedCountryName && selectedCountryName !== '') {
      if (selectedCountryName === this.countryToFind.name) {
        this.correctAnswerLogic(index);
        this.selectedCountries[index].correct = true;
      } else {
        this.incorrectAnswerLogic(index, selectedCountryName);
      }
    }
  }

我需要弄清楚如何制作跨浏览器功能的应用程序或浏览器支持我的应用程序的可能解决方案。

谢谢你的帮助 ：）

Answer 1

我得到了Firefox浏览器的解决方案。原因是Firefox没有event.path属性，它没有触发点击事件，虽然我发现这个event.composedPath()它适用于所有主要的浏览器除了Edge / IE更多细节在Mozilla Documentation。这是一个在Firefox上运行正常的实际代码。

public handleClickEvent(event: any): void {
  const path = event.path || event.composedPath();
  if (this.gameStarted && path && path.length > 0) {
    const country = path[0].id;;
    if (
      // some conditions
    ) {
      // do something
    }
  }
}

我仍然需要在Edge / IE浏览器中解决。谢谢