时间戳

首页 > 解决方案 > 为什么在 Firefox 和 Safari 和 Internet Explorer 中不支持单击处理程序事件 SVG 元素？

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

问题描述

网络应用程序

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

正确的行为应该是什么

*从 SVG 文档填充的所有数据

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

游戏模式

这是处理点击事件的部分代码

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

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

谢谢你的帮助:)

标签： javascriptangularhtmltypescriptsvg

解决方案

我得到了 Firefox 浏览器的解决方案。原因是 Firefox 没有event.path属性并且它不会触发点击事件，尽管我发现event.composedPath()它适用于所有主流浏览器，除了 Edge/IE 更多详细信息在Mozilla 文档中。这是一个在 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 浏览器中解决。谢谢

推荐阅读