在 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");
      }
    },
  },

僅此而已，它終於按我想要的方式工作了。 謝謝你的回復。