Set Popper Click Outside

简述

Set Popper Click Outside 是一种非常有用的 Web 开发技术，它可以让开发者设置一个点击某个区域以外的元素时，触发某个事件。通常在实现一个下拉框或菜单时会用到这个技术。

实现过程

使用第三方库

我们可以利用现成的第三方库实现 Set Popper Click Outside。其中比较流行的库有 react-click-outside、vue-clickaway 以及 jQuery outside-events 等等。

以下是使用 vue-clickaway 库的示例代码：

import Vue from 'vue'
import VueClickaway from 'vue-clickaway'

Vue.use(VueClickaway)

export default {
  data() {
    return {
      isDropdownOpen: false
    }
  },
  methods: {
    // this method will be called when click outside the dropdown menu
    onClickAway() {
      this.isDropdownOpen = false
    }
  }
}

如上代码中，通过调用 Vue.use(VueClickaway) 来注册该插件，并通过 methods 对象将 onClickAway 方法绑定到了模板上。

手写代码实现

我们也可以手写代码来实现 Set Popper Click Outside。

以下是手写代码实现的示例代码：

const dropdown = document.querySelector('.dropdown')
const button = document.querySelector('.button')
let isOpen = false

window.addEventListener('click', (event) => {
  if (isOpen && event.target !== button) {
    dropdown.classList.remove('active')
    isOpen = false
  }
})

button.addEventListener('click', () => {
  if (isOpen) {
    dropdown.classList.remove('active')
  } else {
    dropdown.classList.add('active')
  }

  isOpen = !isOpen
})

如上代码中，通过获取目标元素并设置 isOpen 变量来实现 Set Popper Click Outside。通过 click 事件进行监听并触发相应的方法，从而实现该功能。

总结

Set Popper Click Outside 技术在 Web 开发中有着重要的作用，可以让开发者更加方便地实现各种功能。通过使用现成的第三方库或者手写代码的方式，都可以实现该技术的应用。在实践中，我们应该根据具体的需求选取最适合的方式来实现。