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.
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 | Native Support | Polyfill Support |
---|---|---|
Android | 53 | 2.2+ |
Blackberry | ✘ | 7+ |
Chrome | 41+ | 4 - 40 |
Edge | 15 | 12 - 14 |
Firefox | 35+ | 3.5 - 34 |
Internet Explorer | ✘ | 8+ |
Opera | 28+ | 10 - 27 |
Opera Mobile | 37+ | 12+ |
Safari (iOS) | 9.2+ | 3.2 - 8.4 |
Safari (MacOS) | 9.1+ | 3.1 - 8 |
closest
is especially useful for delegating events, but remember that Internet Explorer 8 does not support #Element.addEventListener
.
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
}