closest

closest is a polyfill for #Element.closest.

npm install element-closest

The #Element.closest method returns the closest element that matches a selector. It returns the element itself, one of its ancestor, or null if there isn't any match.

element.closest(selectorString) //=> Element or null

This is especially useful for delegating events.

document.addEventListener('click', function (event) {
  // find nearest element up the tree that is an <a>
  var link = event.target.closest('a');

  if (link) {
    // do something with the <a>
    event.preventDefault();
  }
});

The script is approximately 428 bytes, or 257 bytes when gzipped.

Usage

For immediate usage, add this script to your document:

<script src="https://unpkg.com/element-closest"></script>

For usage in Node, including Browserify and Webpack, run closest with your window object:

const elementClosest = require('element-closest');

elementClosest(window); // this is used to reference window.Element

Browser compatibility

Internet Explorer 8

closest is especially useful for delegating events, but remember that Internet Explorer 8 does not support #Element.addEventListener.

matches

This library also polyfills #Element.matches, which is widely supported but often vendor-prefixed.

element.matches(selectorString) //=> boolean

matches is especially useful for short-handing hasAttribute or classList.contains with selectors.

const widget = document.querySelector('.custom-widget');

if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
  // do something with the active widget
}

Changes to closest

3.0.2 (October 31, 2019)

• Improved how the file is distributed to Node and Web environments.

3.0.1 (February 5, 2018)

• Fixed an issue where variables were declared out of order

3.0.0 (December 20, 2018)

• Rewritten for usage within Node environments
• Improved documentation

2.0.2 (October 26, 2016)

• Updated Element reference as window.Element
• Updated project configuration

2.0.1 (April 8, 2016)

• Fixed an issue referencing the current nodeType

2.0.0 (April 7, 2016)

• Added linting tests
• Updated plugin to combine legacy version
• Updated documentation

1.0.3 (June 8, 2015)

• Update method name and cleanup source
• Add method name to the polyfill
• Use consistent naming for element
• Place all prefixed fallbacks on the same line

1.0.2 (June 4, 2015)

• Updated documentation

1.0.1 (June 4, 2015)

• Prefix detection
• Check for getComputedStyle
• Treat computed style as an array rather than access cssText as a string
• Resolve "ms" prefix not detected on IE9 (Issue #5)

1.0.0 (February 19, 2015)

• Added: Initial version