element-closest
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/element-closest package

    3.0.2 • 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 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
    }

    Install

    npm i element-closest

    DownloadsWeekly Downloads

    203,274

    Version

    3.0.2

    License

    CC0-1.0

    Unpacked Size

    19.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • jonathantneal
    • trysound