DOM Element Click OutSide handler with Vanilla JS. Easy integration in Vue or React. ES6 Import Module Type

class-click-outside.js

/**
 * Make new class instance for each element
 */
class ClickOutSide {
  constructor() {
    this.outsideHandler = null
    this.element = null
    this.documentEvent = (evt) => {
      const flyoutEl = this.element
      let targetEl = evt.target // clicked same el
      do {
        if (targetEl == flyoutEl) {
          this.setEvent('inside')
          return
        }
        // up to dom
        targetEl = targetEl.parentNode
      } while (targetEl)

      this.setEvent('outside')
    }
  }

  /**
   * Attach element by its id
   *
   * @param {string} el - Element to handle
   */
  attachElementById(id) {
    let el = document.getElementById(id)
    return this.attachElement(el)
  }

  /**
   * Attach vue ref element or ready intanced
   *
   * @param {*} el - Element to handle
   */
  attachElement(el) {
    this.element = el
    document.addEventListener('click', this.documentEvent)

    return this
  }

  setEvent(type) {
    if (type === 'outside') {
      this.outsideHandler()
    }
  }

  /**
   * Event on clicked outside
   *
   * @param {func} anonFunc - anony func to execute
   */
  onOutside(anonFunc) {
    this.outsideHandler = anonFunc
  }

  /**
   *
   * @param {*} el - Element to remove listener
   */
  detach() {
    document.removeEventListener('click', this.documentEvent)
  }
}

export default ClickOutSide

Usage in Vue 3 Composition API:

// element ref
const mainMenu = ref()

onMounted(() => {
    const clickOutside = new ClickOutSide()
    clickOutside.attachElement(mainMenu.value).onOutside(() => {
        // do event..
    })
})