Почему не поддерживается SVG-элемент обработчика кликов в Firefox, Safari и Internet Explorer?

Question

Веб-приложение

Это игровой веб-сайт для поиска карт, созданный с помощью Angular 4. Он имеет различные режимы выбора игр и работает на основе режима выбора, а также во многих регионах, которыеможно выбрать / выбрать или только один регион, затем заполнить название страны, чтобы найти каждый цикл.

Какое должно быть правильное поведение

* Все данные, заполняемые из документа SVG

1. После загрузки страницы - варианты выбора ['New Game', 'Achievement', 'HighScore']
2. Выбор режима игры ['learning', 'classic', 'time']
3. Выберите регионы (один или несколько), затем нажмите play, чтобы играть в игру
4. Отобразите карту и имя SVG, чтобы найти страну случайным образом из SVG
5. Нажмите настрана, затем, если пользователь нажал на правильное уведомление о стране, «правильное», если бы уведомление не было «неправильным» (есть логика, которая может посчитать правильную / неправильную точку)
6. Переместить следующую страну, чтобы найти (затем повторить шаг 5)
7. Конец игры
8. Должно работать все в основных браузерах (Chrome, Firefox, Safari, Edge, Internet Explorer)

Режим игры

• LearningMode = всегда повторять игру

• ClassicMode = запускаться только один раз и заканчиваться

• TimeMode = имеет ограничение по времени для завершения игрыболее

Вот частичный код, который обрабатывает событие нажатия

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 и не вызывает событие click, хотя я обнаружил, что 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.Спасибо