Skip to content

Instantly share code, notes, and snippets.

@leofavre
Last active August 23, 2021 06:50
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leofavre/d029cdda0338d878889ba73c88319295 to your computer and use it in GitHub Desktop.
Save leofavre/d029cdda0338d878889ba73c88319295 to your computer and use it in GitHub Desktop.
This function serves as a polyfill for Event.composedPath()
/**
* Returns an array with all DOM elements affected by an event.
* The function serves as a polyfill for
* [`Event.composedPath()`](https://dom.spec.whatwg.org/#dom-event-composedpath).
*
* @category Event
* @param {Event} evt The triggered event.
* @return {Array.<HTMLElement>} The DOM elements affected by the event.
*
* @example
* let domChild = document.createElement("div"),
* domParent = document.createElement("div"),
* domGrandparent = document.createElement("div"),
* body = document.body,
* html = document.querySelector("html");
*
* domParent.appendChild(domChild);
* domGrandparent.appendChild(domParent);
* body.appendChild(domGrandparent);
*
* domChild.addEventListener("click", dealWithClick);
* const dealWithClick = evt => getEventPath(evt);
*
* // when domChild is clicked:
* // => [domChild, domParent, domGrandparent, body, html, document, window]
*/
function eventPath(evt) {
var path = (evt.composedPath && evt.composedPath()) || evt.path,
target = evt.target;
if (path != null) {
// Safari doesn't include Window, and it should.
path = (path.indexOf(window) < 0) ? path.concat([window]) : path;
return path;
}
if (target === window) {
return [window];
}
function getParents(node, memo) {
memo = memo || [];
var parentNode = node.parentNode;
if (!parentNode) {
return memo;
}
else {
return getParents(parentNode, memo.concat([parentNode]));
}
}
return [target]
.concat(getParents(target))
.concat([window]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment