cheetah-framework/js/framework/directives/onClickOutside.js

Cheetah Framework JS used in all our applications

const IGNORED_SELECTOR = [
  '.el-popper, .el-popper *',
]
const events = new Map()

document.addEventListener('click', (event, ...eventArgs) => {
  events.forEach(({ callback, element }) => {
    if (isClickOutside(event, element) && isNotInIgnoredSelector(event)) {
      callback(event, ...eventArgs)
    }
  })
}, true)

function isClickOutside (event, wrapper) {
  let currentElement = event.target

  do {
    if (currentElement === wrapper) {
      return false
    }

    currentElement = currentElement.parentNode
  } while (currentElement !== null)

  return true
}

function isNotInIgnoredSelector (event) {
  return !_.some(IGNORED_SELECTOR, selector => event.target.matches(selector))
}

export default {
  inserted (element, binding, vnode) {
    if (!_.isFunction(binding.value)) {
      return console.error('Value passed to v-on-click-outside is not a function\n\r    in ' + vnode.context.$options.__file)
    }

    events.set(vnode.context._uid, {
      callback: binding.value,
      element
    })
  },

  unbind (element, binding, vnode) {
    events.delete(vnode.context._uid)
  }
}