├── LICENSE.txt ├── README.md └── pointer_events_polyfill.js /LICENSE.txt: -------------------------------------------------------------------------------- 1 | BSD License for Pointer Events Polyfill (http://github.com/kmewhort/pointer_events_polyfill) 2 | 3 | Copyright (c) 2013, Kent Mewhort 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the 7 | following conditions are met: 8 | 9 | Redistributions of source code must retain the above copyright notice, this list of conditions and the following 10 | disclaimer. 11 | Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following 12 | disclaimer in the documentation and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, 15 | INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 16 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 17 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 18 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 19 | WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 20 | THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pointer Events Polyfill 2 | 3 | Pointer Events Polyfill is a short javascript library which adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, MS IE). 4 | 5 | ## Installation 6 | 7 | Include any reasonable recent version of **jQuery** and **pointer\_events\_polyfill.js**. 8 | 9 | ## Basic usage: 10 | 11 | ```js 12 | $(document).ready(function(){ 13 | PointerEventsPolyfill.initialize({}); 14 | }); 15 | ``` 16 | 17 | That's it! Any "pointer-events: none" attributes will now work seamlessly in IE. 18 | 19 | ## Options 20 | 21 | You can also pass any of the following options into the *initialize* call: 22 | 23 | * **selector**: CSS selector (default: \*). You may wish to narrow this from '*' (all elements) in order to increase performance. 24 | * **mouseEvents**: Array of JS mouse events (default: ['click','dblclick','mousedown','mouseup']). Note that this default excludes a few mouse events for performance reasons, but you can add them back in. 25 | * **usePolyfillIf**: Function with boolean return value (default: simple check for IE<11). Return *true* to apply Pointer Events Polyfill. You can specify your own browser-support test function here (for example, you may wish to use feature detection with Modernizr instead of the default IE check). 26 | 27 | ## License 28 | 29 | (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details. 30 | 31 | -------------------------------------------------------------------------------- /pointer_events_polyfill.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Pointer Events Polyfill: Adds support for the style attribute 3 | * "pointer-events: none" to browsers without this feature (namely, IE). 4 | * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details. 5 | */ 6 | 7 | // constructor 8 | function PointerEventsPolyfill(options) { 9 | // set defaults 10 | this.options = { 11 | selector: '*', 12 | mouseEvents: ['click', 'dblclick', 'mousedown', 'mouseup'], 13 | usePolyfillIf: function() { 14 | if (navigator.appName == 'Microsoft Internet Explorer') 15 | { 16 | /* jshint ignore:start */ 17 | var agent = navigator.userAgent; 18 | if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null) { 19 | var version = parseFloat(RegExp.$1); 20 | if (version < 11) 21 | return true; 22 | } 23 | /* jshint ignore:end */ 24 | } 25 | return false; 26 | } 27 | }; 28 | if (options) { 29 | var obj = this; 30 | $.each(options, function(k, v) { 31 | obj.options[k] = v; 32 | }); 33 | } 34 | 35 | if (this.options.usePolyfillIf()) 36 | this.register_mouse_events(); 37 | } 38 | 39 | 40 | /** 41 | * singleton initializer 42 | * 43 | * @param {object} options Polyfill options. 44 | * @return {object} The polyfill object. 45 | */ 46 | 47 | PointerEventsPolyfill.initialize = function(options) { 48 | /* jshint ignore:start */ 49 | if (PointerEventsPolyfill.singleton == null) 50 | PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options); 51 | /* jshint ignore:end */ 52 | return PointerEventsPolyfill.singleton; 53 | }; 54 | 55 | 56 | /** 57 | * handle mouse events w/ support for pointer-events: none 58 | */ 59 | PointerEventsPolyfill.prototype.register_mouse_events = function() { 60 | // register on all elements (and all future elements) matching the selector 61 | $(document).on( 62 | this.options.mouseEvents.join(' '), 63 | this.options.selector, 64 | function(e) { 65 | if ($(this).css('pointer-events') == 'none') { 66 | // peak at the element below 67 | var origDisplayAttribute = $(this).css('display'); 68 | $(this).css('display', 'none'); 69 | 70 | var underneathElem = document.elementFromPoint( 71 | e.clientX, 72 | e.clientY); 73 | 74 | if (origDisplayAttribute) 75 | $(this) 76 | .css('display', origDisplayAttribute); 77 | else 78 | $(this).css('display', ''); 79 | 80 | // fire the mouse event on the element below 81 | e.target = underneathElem; 82 | $(underneathElem).trigger(e); 83 | 84 | return false; 85 | } 86 | return true; 87 | }); 88 | }; 89 | --------------------------------------------------------------------------------