Vue에서 외부 클릭을 감지하는 방법

외부 클릭 감지는 우리가 구축하는 거의 모든 앱에서 필요한 공통 사항입니다.

이를 감지할 수 있는 재사용 가능한 구성 요소를 갖는 것은 시간을 절약하고 우리가 구축하는 것에 집중하는 데 도움이 되는 좋은 방법입니다.

먼저 구성 요소의 코드를 보여주고 아래에서 어떻게 작동하는지 설명하겠습니다. 우리는 이 구성 요소를 DetectOutsideClick.vue라고 부를 것입니다.

<template>
  <div ref="root">
    <slot />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const emit = defineEmits(['detect'])
const root = ref(null)

const onClick = (e) => {
  if (e.target === root.value || root.value.contains(e.target)) {
    return
  }
  emit('detect')
}

onMounted(() => {
  document.body.addEventListener('click', onClick)
})

onUnmounted(() => {
  document.body.removeEventListener('click', onClick)
})
</script>

사용 방법에 대한 예는 다음과 같습니다.

<DetectOutsideClick @detect="onOutsideClick">
  <div class="popup">A popup component</div>
</DetectOutsideClick>

어떻게 작동합니까?

여기서 아이디어는 페이지의 모든 클릭을 듣는 것입니다. 클릭한 요소가 내부 요소<DetectOutsideClick> 또는 그 하위 요소가 아닌 경우 외부 클릭입니다.

다음을 사용하여 페이지의 모든 클릭을 듣습니다.

document.body.addEventListener('click', (e) => {})

다음은 동일한 요소인지 하위 요소인지 확인하는 방법입니다.

if (e.target === root.value || root.value.contains(e.target))

이 경우 우리return는 외부 클릭이 아니기 때문입니다. 그러나 외부 클릭인 경우 detect 라는 이벤트를 발생시킵니다.

그게 다야!