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

Question

The web application

It is a web-based finding map game site built with Angular 4. It has various selection game mode and runs based on the selection mode also many regions that can choose/select or only one region then populate the country name to find each cycle.

What should be the correct behavior

*All data populating from SVG document

1. After page load - Options to choose ['New Game', 'Achievement', 'HighScore']
2. Choose a game mode ['learning', 'classic', 'time']
3. Select regions (one or more) then press play to play the game
4. Display the SVG map and name to find a country randomly from SVG
5. Click on a country then if a user clicked correct country notification 'correct' if not notification would be 'incorrect' (there are the logic that can count the correct/incorrect point)
6. Move next Country to find (then repeat step 5)
7. End game
8. It should work all in the major Browsers (Chrome, Firefox, Safari, Edge, Internet Explorer)

Game Mode

• LearningMode = always repeat game

• ClassicMode = run only one time and end

• TimeMode = has a time limit to finish otherwise game over

Here is a partial code it handles the click event

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

Game run logic

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

I need to figure out how I can make cross-browser capabilities app or what could be possible solutions that the browser does support mine app.

Thank you for help :)

Answer 1

I got the solution for the Firefox browser. The reason was Firefox doesn't have event.path property and it doesn't triggering the click event though I found this event.composedPath() it works with all major browser except Edge/IE more detail in Mozilla Documentation . Here is an actual code that works fine on 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
    }
  }
}

I still need to solve in the Edge/IE browser. Thanks