Vue JS - 如何同時綁定兩個事件@mouseover和@click

Question

我有四張圖片，當我hover鼠標在它們上面時，從下方顯示了某個組件，但是我仍然需要綁定點擊事件，即當我點擊圖片時，應該顯示該組件； 再次單擊組件時，問題是我無法同時綁定兩個事件

我了解當用戶將鼠標懸停在組件上時，它會立即顯示，並且點擊事件將無用，但我在移動版中會需要它

你也可以在codesandbox中查看我的代碼

<template>
  <div>
    <div class="enjoy_headline_container">
      <div class="EnjoyGirlsContainer">
        <div>
          <h3 style="margin: 0"></h3>
        </div>

        <div class="EnjoyGirlsList">
          <div
            v-for="(chunk, index) in Math.ceil(EnjoyGirlsList.length / 2)"
            :key="'chunk-' + index"
            :class="'wrap-' + index"
          >
            <div
              v-for="(item, index) in EnjoyGirlsList.slice(
                (chunk - 1) * 2,
                chunk * 2
              )"
              :key="'img-' + index"
              class="EnjoyCard"
              :class="'EnjoyCard-' + index"
            >
              <div v-on:click="isHidden = !isHidden">
                <img
                  @mouseover="mouseOver(item, (hover = true))"
                  :src="item.imagePath"
                  alt="Snow"
                />
              </div>

              <div class="EnjoyCardContainer">
                <div
                  :style="{ background: item.textColor }"
                  class="EnjoyCardChildContainer"
                >
                  <h3 class="EnjoyCardChildContainerTitleName">
                    {{ item.titleName }}
                  </h3>
                </div>
              </div>

              <div
                v-if="selected === item && !isHidden"
                class="below-all-description EnjoyGirlsHoverEffect"
              >
                <div class="next-to-description EnjoyGirlsHoverEffect">
                  <div
                    style="width: 100%; display: flex; justify-content: center"
                    v-for="(enjoy, index) in EnjoyGirlsList"
                    :key="index"
                  >
                    <div
                      @mouseleave="mouseout(enjoy, (hover = false))"
                      class="EnjoyGirlsChildHoverEffect"
                    >
                      <component
                        v-show="enjoy.hovered"
                        v-bind:is="enjoy.componentName"
                      ></component>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="!isHidden" class="below-all-description">
          <template v-if="selected === null"></template>
          <template v-else>
            <div
              style="width: 100%; display: flex; justify-content: center"
              v-for="(enjoy, index) in EnjoyGirlsList"
              :key="index"
            >
              <div
                @mouseleave="mouseout(enjoy, (hover = false))"
                class="EnjoyGirlsChildHoverEffect"
              >
                <component
                  v-show="enjoy.hovered"
                  v-bind:is="enjoy.componentName"
                ></component>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EnjoyBlue from "./components/EnjoyBlue";
import EnjoyGreen from "./components/EnjoyGreen";
import EnjoyYellow from "./components/EnjoyYellow";
import EnjoyRed from "./components/EnjoyRed";

export default {
  name: "HomePage",
  components: {
    EnjoyRed,
    EnjoyYellow,
    EnjoyGreen,
    EnjoyBlue,
  },

  data() {
    return {
      isHidden: false,
      selected: null,
      hover: false,
      sectionGirlsListComponentsNames: [
        "EnjoyRed",
        "EnjoyYellow",
        "EnjoyGreen",
        "EnjoyBlue",
      ],
      EnjoyGirlsList: [
        {
          imagePath: "https://i.ibb.co/mCpNXhG/IMG-6061-min.png",
          titleName: "TEENS",
          textColor: "#74C8C5",
          hovered: false,
          componentName: "EnjoyBlue",
        },
        {
          imagePath: "https://i.ibb.co/WvJjwsN/Rectangle-2.png",
          titleName: "MINXES",
          textColor: "#76ED00",
          hovered: false,
          componentName: "EnjoyGreen",
        },
        {
          imagePath: "https://i.ibb.co/7khc5f0/Rectangle-3.png",
          titleName: "MILFS",
          textColor: "#FFE600",
          hovered: false,
          componentName: "EnjoyYellow",
        },
        {
          imagePath: "https://i.ibb.co/6nz97Bw/Rectangle-4.png",
          titleName: "COURGARS",
          textColor: "#CC003D",
          hovered: false,
          componentName: "EnjoyRed",
        },
      ],
    };
  },
  methods: {
    mouseOver: function (enjoy) {
      this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
      this.selected = enjoy;
      enjoy.hovered = true;
      if (this.hover) {
        console.log("4949494");
      }
    },
    mouseout: function (enjoy) {
      this.selected = null;
      enjoy.hovered = false;
    },
    mouseEnter: function () {},
    Prev() {
      this.$refs.carousel.prev();
    },
    showNext() {
      this.$refs.carousel.next();
    },
  },
};
</script>

因此，如果您在代碼和框中查看此代碼（我將鏈接留在頂部），那么您可能已經注意到 hover 僅在第一次工作之后它不起作用，只有點擊事件起作用

Answer 1

您的點擊事件切換isHidden 。 當您單擊它時，您將isHidden設置為true 。 之后它不會顯示，如果你用 hover 覆蓋它，因為你用v-if隱藏它：

<div v-if="!isHidden" class="below-all-description">
...
</div>

解決方案：在您的mouseOver function 中，您必須明確將isHidden設置為false 。

methods: {
    mouseOver: function (enjoy) {
        this.isHidden = false;
        this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
        ...
    }
    ...
}