在 Vue 中使用 window.addEventListener 多次触发事件

Question

我的 Vue 组件中有这个 html 代码

<div id="stats" class="" @click="clickOutside()">
          <ArticleStats
            :article="article"
            class="tw-mt-5 tw-hidden md:tw-flex"
            
          />
          <div
            @click="$router.push('/article/' + article.content_content_id)"
            class="
              tw-mt-5 tw-block tw-text-center tw-text-sm
              md:tw-text-base
              tw-cursor-pointer
              tw-text-white
              tw-p-2
              tw-rounded-2xl
              tw-w-full
              tw-bg-red-400
              hover:tw-bg-red-600 hover:tw-text-white
            "
          >
            Leer más
          </div>
        </div>

该方法 clickOutside() 是这样的：

clickOutside() {
      console.log('hola')
      window.addEventListener("mouseup", (e) => {
        console.log(e);
        const clickedE1 = e.target;

        if (this.$el.contains(clickedE1)) {
          console.log("inside");
        } else {
          console.log("outside");
        }
      });
    },

但是，当我单击该 div 时，该事件被多次触发，这是控制台中的响应，只需单击一下：

任何人都可能知道如何解决它或为什么会发生这种情况？

Answer 1

这是由元素及其子元素触发的，因此您应该添加self修饰符以防止该行为：

<div id="stats" class="" @click.self="clickOutside()">

有关更多详细信息，请查看此https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

Answer 2

我最后做的是在 created 钩子上创建一个事件监听器，在 destroy 钩子上删除它，并添加一个检测目标的方法，这样：

created() {
    window.addEventListener("mouseup", this.onMouseUp);
  },
  destroyed() {
    window.removeEventListener("mouseup", this.onMouseUp);
  },
methods: {
    onMouseUp(e) {
      const clickedE1 = e.target;
      if (this.$el.contains(clickedE1)) {
        console.log("inside");
      } else {
        console.log("outside");
      }
    },
  },

仅此而已，它终于按我想要的方式工作了。 谢谢你的回复。