事件用窗口多次发射。

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

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

有人可能知道如何修复它，或者为什么会发生这种情况？

Answer 1

我最终所做的是在创建的钩子上创建一个事件侦听器，将其删除在被破坏的钩子上，然后添加一种检测目标的方法，这样一来：

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

这就是全部，最终按照我想要的方式奏效。感谢您的回复。

Answer 2

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

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

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