Nattily Polished Marbles
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

element-closest

3.0.1 • Public • Published

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 258 bytes when minified and gzipped.

Usage

For immediate usage, add this script to your document:

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

For Node usage, 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
}

install

npm i element-closest

Downloadsweekly downloads

51,215

version

3.0.1

license

CC0-1.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability