JavaScript adding event listeners to path elements of svg not working here

Question

const countries = Array.from(document.getElementsByClassName('country'));
countries.forEach(c => {
  c.addEventListener('click', function() {
    console.log('you clicked:', c.getAttribute('title'));
  })
})

.map {
  background: #88aaaa;
}
.map {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  position: relative;
  visibility: visible;

  width: 100%;
  height: 100%;
  padding: 3rem 1rem;
  opacity: 1;
  transition: opacity 0.5s;

  z-index: -1;
  margin-top: -90px;
}
.map_svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin-left: 1rem;
}

.map_svg path {
  fill-opacity: 1;
  stroke: #21252b;
  stroke-opacity: 1;
  stroke-width: 0.5;
  transition: 0.5s;
}


    
  
one
two
three

I have a page with an SVG containing multiple paths (this is for a world map), and wanted to make a script to add an event listener to each path, so you can click on an individual country and make things happen, though I am having trouble and not sure why.

I created a very simple script:

const countries = Array.from(document.getElementsByClassName('country'));
countries.forEach(c => {
  console.log(c);
  c.addEventListener('click', function() {
    console.log('you clicked:', c.getAttribute('title'));
  })
})

The script does loop through the elements array and each element is output to the console, mousing over the element in the console highlights the area on the page... but it appears no event listener is created, or bound to the path.

I did check the script is working by creating a set of paragraphs on the page:

one
two
three

These are now picked up by the same script and have event listeners that log the expected results on click... but nothing happens when the paths are clicked on. It seems like chrome just doesn't want to add event listeners to path elements, but I know it should be possible.

for reference the svg is inline defined like this:

I have also tried hardcoding an event listener to a specific path id but that also does not do anything on click, i.e:

const oz = document.getElementById("AU");
console.log(oz);
oz.addEventListener("click", () => {
  console.log('clicked on oz');
});

While trying to find a solution I have seen examples of the same approach working, e.g. https://svg-tutorial.com/svg/interaction

And I can't realistically see where I am doing anything different that would cause a problem

As per request have tried adding a snippet: Edit: Shrunk & updated snippet to avoid issues:

Yogi · Accepted Answer

Incorrect Stacking Context

The problem is caused by applying css z-index: -1 to the wrapper element. This reorders the stacking context so that the document body masks pointer events on the svg paths within the wrapper, i.e., the svg appears behind the body.

The stacking order can be corrected by removing either z-index: -1 (defaults to "auto") or position: relative (defaults to "static").

Run the snippet and click on the rectangle path. Then check z-index option and repeat.

addEventListener('click', (e) => {
  console.log(e.type, e.target.tagName, e.target.getAttribute('title'));
})

document.querySelector('input').addEventListener('change', (e) => {
  document.querySelector('section').classList.toggle('map');
})

.map {
  position: relative;
  z-index: -1;
}

 Use Z-Index -1

JavaScript adding event listeners to path elements of svg not working here

Answers (2)

Related Questions