jquery.pointer-events-polyfill

    0.2.4 • Public • Published

    jQuery CSS Pointer-Events Polyfill

    license npm Bower

    This piece of javascript is a tiny Polyfill which adds support for the css-property pointer-events: none|all; for browsers not supporting it.

    The size of the minified script is ~1000 bytes (roughly 500 bytes gzipped).

    pointer-events browser support

    Dependencies

    This Polyfill depends on jQuery @ ~1.9.

    Usage

    Include jquery.pointer-events-polyfill.js in your document, and call the polyfill like this:

    $(function(){
        window.pointerEventsPolyfill();
    });

    Now your page supports pointer-events!

    If you want to remove the polyfill again, sometime later, use it like this:

    $(function(){
        var polyfill = window.pointerEventsPolyfill();
        // ...stuff
        polyfill.destroy();
    });

    Caveats

    The polyfill doesn't catch events

    Imagine you have two elements overlapping like this:

    You want the purple element to not be clickable, so you add pointer-events:none to it.

    Now you add click-listeners to both elements. When the intersecting area gets clicked, the first event to be thrown will be that of the purple element, the second one will be the green-ish one.

    The purple element's event will be thrown!

    Synchronous callbacks might hide events temporarily

    The Polyfill hides the elements synchronous to check whether the underlying elements have been clicked, so you're better of not blocking the event-loop, when listening on the subscribed events in order to not have invisible elements.

    Example:

    <div style="pointer-events: none;" class="non-clickable">
        <div style="pointer-events: all;" class="clickable"></div>
    </div>
     
    <script>
        window.pointerEventsPolyfill();
     
        $('.clickable').click(function(){
            // bad - alert blocks the event-loop, so .non-clickable
            // will be invisible while the alert is open
            alert('clicked');
     
            // better
            setTimeout(function(){
                alert('clicked');
            });
        });
    </script> 

    Available Options

    You can call window.pointerEventsPolyfill with a couple of possibly useful options, namely:

    • selector (jQuery-selector, default: '*') - indicates which elements the polyfill should apply to.
    • listenOn (Array, default: ['click', 'dblclick', 'mousedown', 'mouseup']) - the events this plugin listens to. Excludes mouseover-events for performance, but you can add them yourself.
    • forcePolyfill (Bool, default: false) - disregard the browsers support of pointer-events and force the polyfill to be added.
    • pointerEventsNoneClass (String|null, default: null) - when truthy, add the polyfill to elements with this class, even when the elements css doesn't have the pointer-events-property set.
    • pointerEventsAllClass (String|null, default: null) - when truthy, this element acts as pointer-events: all;-element. (The opposite of pointerEventsNoneClass).
    • eventNamespace (String|null, default: pointer-events-polyfill) - the namespace this plugin should use to identify events.

    Changelog

    • 0.2.4 - correct namespaces for subscriptions
    • 0.2.3 - better test, remove explicit support for pointer-events:auto
    • 0.2.2 - add namespace to the subscribed events, add first basic tests
    • 0.2.1 - documentation
    • 0.2.0 - change css-detection to use recursive traversion, detecting pointer-events: none|all on parent-elements
    • 0.1.0 - initial version

    License

    MIT

    Credits

    Credits, where credits are due. This Polyfill is loosely based on @kmeworth's pointer_events_polyfill.

    The reason for this package's existance is that the pointer_events_polyfill is seemingly unmaintained and no longer adheres to common jQuery-Plugin best practices. Also, this package is available on Bower & NPM.

    List of Contributors:

    • @kmeworth
    • @mhmxs
    • @raldred
    • Modernizr
    • and probably some more awesome people

    Install

    npm i jquery.pointer-events-polyfill

    DownloadsWeekly Downloads

    51

    Version

    0.2.4

    License

    MIT

    Last publish

    Collaborators

    • screeny05