Pointer-events IE polyfill (vanilla JS)

browser.js

/**
 * Browser utility
 *
 * Exports utility methods to detect browser types and versions from userAgent
 */

/**
 * Returns true if is IE browser equal or below given version
 *
 * @param  {Number} version
 * @return {Boolean}
 */
function isIeEqualOrBelow(version) {
  let v

  if (navigator.userAgent.indexOf('MSIE') === -1 || window.ActiveXObject === undefined) {
    v = null
  } else if (!document.querySelector) {
    v = 7
  } else if (!document.addEventListener) {
    v = 8
  } else if (!window.atob) {
    v = 9
  } else if (!document.__proto__) {
    v = 10
  } else {
    v = 11
  }

  return v && v <= version
}

/**
 * Returns true if is Opera Mini browser
 *
 * @return {Boolean}
 */
function isOperaMini() {
  return navigator.userAgent.indexOf('Opera Mini') !== -1
}

module.exports = { isIeEqualOrBelow, isOperaMini }

pointer-events.js

const browser = require('./browser')

/**
 * Pointer Events polyfill
 *
 * Polyfill that allows seamless compatibility of pointer-events css
 * attribute
 */

const EVENTS = [ 'click', 'dblclick', 'mousedown', 'mouseup' ]

/**
 * Initialise pointer-events polyfill
 */
exports.init = function () {
  if (!(browser.isIeEqualOrBelow(10) || browser.isOperaMini())) { return }
  EVENTS.forEach(evt => document.addEventListener(evt, polyfillEvent))
}

/**
 * Polyfill given mouse event
 *
 * @param  {MouseEvent} event
 * @return {void}
 */
function polyfillEvent(event) {
  const { target, clientX, clientY, eventType } = event
  const style = window.getComputedStyle(target)

  if (style['pointer-events'] === 'none') {
    let origDisplayAttribute = style.display

    target.style.display = 'none'

    const underneathEl = document.elementFromPoint(clientX, clientY)

    event.target = underneathEl

    if (document.createEvent) {
      underneathEl.dispatchEvent(event)
    } else {
      underneathEl.fireEvent(`on${ eventType }`, event)
    }

    if (origDisplayAttribute) {
      target.style.display = origDisplayAttribute
    } else {
      target.style.display = ''
    }

    return false
  }

  return true
}