Skip to content
master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Dec 20, 2018
Dec 20, 2018
Dec 20, 2018
Oct 31, 2019
Oct 31, 2019
Dec 20, 2018
Dec 20, 2018
Oct 31, 2019
Oct 31, 2019
Oct 31, 2019

README.md

closest closest

npm version build status support chat

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

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

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
}
You can’t perform that action at this time.