VueUse OnClickOutside组件ignore选项不生效，求修复方案

问题代码 #

<template>
  <button class="button" id="button1" ref="tempRef">AAA</button>
  <OnClickOutside id="clickOutside" :options="{ ignore: [tempRef] }" @trigger="console.log(tempRef)">
    <button class="button" id="button2">BBB</button>
  </OnClickOutside>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const tempRef = ref()
</script>

问题描述 #

预期点击button1时，因tempRef已加入ignore选项，OnClickOutside不会被触发，但实际点击后控制台仍输出tempRef，调整后无效。

误区分析 #

你误解了ignore选项的作用：

• ignore列表用于忽略对指定元素内部的点击，且这些元素必须位于OnClickOutside组件包裹的元素内部。
• 你的场景中，button1不在OnClickOutside的包裹范围内，点击它属于“点击包裹元素之外的区域”，这正是OnClickOutside要监听触发的场景，ignore对这类外部元素完全不起作用。

修复方案 #

如果需要点击button1时不触发OnClickOutside的trigger事件，应该在回调中判断点击目标是否为button1（或其子元素），逻辑如下：

<template>
  <button class="button" id="button1" ref="tempRef">AAA</button>
  <OnClickOutside id="clickOutside" @trigger="handleClickOutside">
    <button class="button" id="button2">BBB</button>
  </OnClickOutside>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const tempRef = ref()

const handleClickOutside = (event) => {
  // 若点击目标是tempRef对应元素或其子元素，直接返回不执行后续逻辑
  if (tempRef.value?.contains(event.target)) return
  console.log('外部点击已触发')
}
</script>

ignore选项的正确用法示例 #

当OnClickOutside包裹的元素内部有某个子元素，你希望点击该子元素时不触发外部点击事件，此时才适合用ignore：

<template>
  <OnClickOutside :options="{ ignore: [ignoreBtn] }" @trigger="console.log('外部点击触发')">
    <div class="wrapper">
      <button>点击我（包裹内元素）不会触发外部事件</button>
      <button ref="ignoreBtn">点击我也不会触发外部事件（已加入ignore）</button>
    </div>
  </OnClickOutside>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const ignoreBtn = ref()
</script>

内容的提问来源于stack exchange，提问作者YorS