jQuery CSS Pointer-Events Polyfill
pointer-events: none|all; for browsers not supporting it.
The size of the minified script is ~1000 bytes (roughly 500 bytes gzipped).
This Polyfill depends on jQuery
jquery.pointer-events-polyfill.js in your document, and call the polyfill like this:
Now your page supports
If you want to remove the polyfill again, sometime later, use it like this:
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.
You can call
window.pointerEventsPolyfill with a couple of possibly useful options, namely:
'*') - indicates which elements the polyfill should apply to.
['click', 'dblclick', 'mousedown', 'mouseup']) - the events this plugin listens to. Excludes mouseover-events for performance, but you can add them yourself.
false) - disregard the browsers support of
pointer-eventsand force the polyfill to be added.
null) - when truthy, add the polyfill to elements with this class, even when the elements css doesn't have the
null) - when truthy, this element acts as
pointer-events: all;-element. (The opposite of
pointer-events-polyfill) - the namespace this plugin should use to identify events.
- 0.2.4 - correct namespaces for subscriptions
- 0.2.3 - better test, remove explicit support for
- 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|allon parent-elements
- 0.1.0 - initial version
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:
- and probably some more awesome people