Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work with IE11, but I have a fix #15

Open
AndreasHeintze opened this issue Nov 20, 2018 · 0 comments
Open

Does not work with IE11, but I have a fix #15

AndreasHeintze opened this issue Nov 20, 2018 · 0 comments

Comments

@AndreasHeintze
Copy link

I noticed that this does not work in IE11, so I made some changes to make it work in IE11 too.
Here is the updated version.

function validate(binding) {
    if (typeof binding.value !== 'function') {
      // eslint-disable-next-line
      console.warn('[Vue-click-outside:] provided expression', binding.expression, 'is not a function.')
      return false
    }
  
    return true
  }
  
  function isPopup(popupItem, elements) {
    if (!popupItem || !elements)
      return false
  
    for (var i = 0, len = elements.length; i < len; i++) {
      try {
        if (popupItem.contains(elements[i])) {
          return true
        }
        if (elements[i].contains(popupItem)) {
          return false
        }
      } catch(e) {
        return false
      }
    }
  
    return false
  }
  
  function isServer(vNode) {
    return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer
  }

  // Since IE11 doesn't support e.composedPath()
  function composedPath (el) {
    var path = []
    while (el) {
      path.push(el)
      if (el.tagName === 'HTML') {
        path.push(document)
        path.push(window)
        return path
      }
      el = el.parentNode
    }
  }

  exports = module.exports = {
    bind: function (el, binding, vNode) {
      if (!validate(binding)) return
  
      // Define Handler and cache it on the element
      function handler(e) {
        if (!vNode.context) return
  
        // some components may have related popup item, on which we shall prevent the click outside event handler.
        var elements = e.path || (e.composedPath && e.composedPath()) || composedPath(e.target)
        elements && elements.length > 0 && elements.unshift(e.target)

        if (el.contains(e.target) || isPopup(vNode.context.popupItem, elements)) return
  
        el.__vueClickOutside__.callback(e)
      }
  
      // add Event Listeners
      el.__vueClickOutside__ = {
        handler: handler,
        callback: binding.value
      }
      const clickHandler = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
      !isServer(vNode) && document.addEventListener(clickHandler, handler)
    },
  
    update: function (el, binding) {
      if (validate(binding)) el.__vueClickOutside__.callback = binding.value
    },
    
    unbind: function (el, binding, vNode) {
      // Remove Event Listeners
      const clickHandler = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
      !isServer(vNode) && document.removeEventListener(clickHandler, el.__vueClickOutside__.handler)
      delete el.__vueClickOutside__
    }
  }

Note! This does also contain the fix for IOS devices.

Gil-1 added a commit to Gil-1/click-outside that referenced this issue Mar 7, 2019
Daewl added a commit to Daewl/click-outside that referenced this issue Jul 29, 2019
index.js updated  for ios and ie11

vue-bulma#15
vue-bulma#9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant