Vue click outside指令在v-for元素内部触发异常求助

问题分析 #

当通过v-for循环渲染元素并逐个绑定v-click-outside指令时，点击任意元素内部会触发其他元素的指令回调，且外部点击会多次触发。原因是：

• 每个循环项都会给document.body添加独立的点击事件监听器。
• 点击某元素内部时，该元素的指令会判断点击在内部而不触发回调，但其他循环项的指令会认为点击不在自身内部，从而触发各自的回调函数。

解决方案 #

方案1：将指令绑定到父容器（推荐，适合全局外部点击触发一次的场景） #

如果需求是点击所有循环项外部才触发一次回调，直接把指令绑定到循环的父容器上，避免给每个子元素重复绑定监听器：

<template>
  <div id="app" style="display: flex; gap: 10px" v-click-outside="showClickAway">
    <div
      v-for="(item, index) in myItems"
      :key="index"
      class="my-item"
    >
      {{ item }}
    </div>
  </div>
</template>

原指令逻辑无需修改，此时只有父容器的一个监听器，点击子元素内部时，父容器的el.contains(event.target)为true，不会触发回调；点击外部时仅触发一次。

方案2：修改指令逻辑（适合每个元素需独立外部点击逻辑的场景） #

如果需要每个循环项在自身外部点击时触发独立回调，同时点击其他循环项内部时不触发，可通过维护绑定元素集合来判断：

// 存储所有绑定了v-click-outside指令的元素
const boundElements = new Set();

Vue.directive("click-outside", {
  bind: function (el, binding, vnode) {
    boundElements.add(el);
    
    el.clickOutsideEvent = function (event) {
      // 检查点击目标是否在任意一个绑定元素内部
      const isInsideAnyBoundElement = Array.from(boundElements).some(el => 
        el === event.target || el.contains(event.target)
      );
      // 仅当点击不在任何绑定元素内部时，触发当前元素的回调
      if (!isInsideAnyBoundElement) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener("click", el.clickOutsideEvent);
  },
  unbind: function (el) {
    boundElements.delete(el);
    document.body.removeEventListener("click", el.clickOutsideEvent);
  }
});

这样点击任意循环项内部时，所有指令都不会触发回调；点击外部时，每个绑定元素的回调会各自触发（若需仅触发一次，仍推荐方案1）。

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