Firefox and .path

Firefox and the new way

I was working on a project and had to use .path, but it gave me a bit of a problem, therefore I dug a bit deeper and tried to figure out what went wrong. So in this post I’ll go through the process and share what I figured out, thanks to the help of allot of searching and the amazing Stackoverflow community.

1
2
3
4
5
6
7

// Here's the example of how it should've worked

testingPathEl.addEventListener('click', (e) => {
  const testingPathInfo = e.path.find((item) => {
    // do stuff here
  });
});

The above in my instance returned with an ‘undefined’ warning in Firefox.

1
2
3
4
5
6
7
8

// However for Firefox and the more modern option

testingPathEl.addEventListener('click', (e) => {
  const path = e.path || (e.composedPath && e.composedPath()); // < Needed for Firefox
  const testingPathInfo = e.path.find((item) => {
    // do stuff here
  });
});

The above worked flawlessly.

Old vs New

After some research it appears that .path is merely an old way of doing things, whereas composedPath is the new and supported way, however there is a way to have the ‘old’ way be there as a backup.

1
2
3
4
5
6

var path = event.path || (event.composedPath && event.composedPath());
if (path) {
  // You got some path information
} else {
  // This browser doesn't supply path information
}

I hope this post helps some of you and goes to show, that you’re never done learning and always have to keep up.

With kind regards,

-CoffeeFueledPanda