Nuxt js Écouteur d'événements de curseur personnalisé ne fonctionne pas après le changement de route

Question

Je suis en train de construire un nouveau site web pour notre studio mais je n'arrive pas à faire fonctionner correctement le curseur personnalisé. Voici un curseur personnalisé construit avec gsap et le résultat était génial sauf quand je navigue vers une autre route et reviens à la page d'accueil, l'événement mouseover cesse de fonctionner et je ne trouve pas de raison pourquoi.

Qu'est-ce qui pourrait causer cela et comment cela pourrait-il être corrigé?

Merci d'avance!

Voici le composant CustomCursor :

      import gsap from "gsap";

      export default {
        props: {
          hoverClass: {
            type: String,
            default: 'cursorHover'
          }
        },
        mounted () {
          const cursorBig = document.getElementById('cursor-big'),
                cursorSmall = document.getElementById('cursor-small'),
                links = document.getElementsByTagName("a"),
                withClassHover = document.getElementsByClassName(this.hoverClass),
                withHover = [...links, ...withClassHover];

          // Écouteurs d'événements
          document.addEventListener("mousemove", onMouseMove);
          document.addEventListener("mousedown", onMouseHover);
          document.addEventListener("mouseup", onMouseHoverOut);
          document.addEventListener("mouseenter", () => {
            cursorBig.style.opacity = 1;
            cursorSmall.style.opacity = 1;
          });
          document.addEventListener("mouseleave", () => {
            cursorBig.style.opacity = 0;
            cursorSmall.style.opacity = 0;
          });
          withHover.forEach((element) => {
            element.addEventListener("mouseover", onMouseHover);
            element.addEventListener("mouseout", onMouseHoverOut);
          })

          // Gestionnaires d'événements
          function onMouseMove(e) {
            cursorSmall.style.opacity = 1;
            gsap.to(cursorBig, 0.4, {
              x: e.clientX - 18.5,
              y: e.clientY - 18.5
            });
            gsap.to(cursorSmall, 0.1, {
              x: e.clientX - 4,
              y: e.clientY - 4
            });
          }
          function onMouseHover() {
            gsap.to(cursorBig, 0.3, {
              scale: 3,
            });
          }
          function onMouseHoverOut() {
            gsap.to(cursorBig, 0.3, {
              scale: 1,
            });
          }
        }
      };

      @media screen and (min-width:1100px) {
        * {
          cursor: none !important;
        }

        .custom-cursor__ball {
          position: fixed;
          top: 0;
          left: 0;
          mix-blend-mode: difference;
          z-index: 99999;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.5s ease;
        }

        .custom-cursor__ball--big {
          content: "";
          width: 35px;
          height: 35px;
          background: white;
          border-radius: 50%;
        }

        .custom-cursor__ball--small {
          content: "";
          width: 6px;
          height: 6px;
          background: #fff;
          border-radius: 50%;
        }
      }

Answer 1

Déplacé des commentaires:

• Problème: Les éléments avec la classe cursorHover ne sont pas dans le DOM après avoir été supprimés lorsque vous changez de route. Monté ne se déclenche qu'une seule fois.

Correction: Gérez la réinitialisation de vos événements sur les éléments du DOM, et détruisez vos gestionnaires d'événements personnalisés lorsque la route change.

import gsap from "gsap";

export default {
  name: "CustomCursor",
  props: {
    hoverClass: {
      type: String,
      default: "cursorHover",
    },
  },
  data() {
    return {
      cursorBig: null,
      cursorSmall: null,
      withHover: [],
    };
  },
  watch: {
    "$route.path"() {
      console.log("changement de route");
      this.destroy();
      this.$nextTick(this.init);
    },
  },
  mounted() {
    console.log("monté");
    this.$nextTick(this.init);
  },
  beforeDestroy() {
    console.log("avant de détruire");
    this.destroy();
  },
  methods: {
    init() {
      console.log("init");
      setTimeout(() => {
        this.cursorBig = document.getElementById("cursor-big");
        this.cursorSmall = document.getElementById("cursor-small");

        this.withHover = [
          ...document.getElementsByTagName("a"),
          ...document.getElementsByClassName(this.hoverClass),
        ];

        this.withHover.forEach((element) => {
          element.addEventListener("mouseover", this.onMouseHover);
          element.addEventListener("mouseout", this.onMouseHoverOut);
        });
        document.addEventListener("mousemove", this.onMouseMove);
        document.addEventListener("mousedown", this.onMouseHover);
        document.addEventListener("mouseup", this.onMouseHoverOut);
        document.addEventListener("mouseenter", this.onMouseEnter);
        document.addEventListener("mouseleave", this.onMouseLeave);
      }, 100);
    },
    destroy() {
      console.log("détruire");
      this.withHover.forEach((element) => {
        element.removeEventListener("mouseover", this.onMouseHover);
        element.removeEventListener("mouseout", this.onMouseHoverOut);
      });
      document.removeEventListener("mousemove", this.onMouseMove);
      document.removeEventListener("mousedown", this.onMouseHover);
      document.removeEventListener("mouseup", this.onMouseHoverOut);
      document.removeEventListener("mouseenter", this.onMouseEnter);
      document.removeEventListener("mouseleave", this.onMouseLeave);
    },
    onMouseEnter() {
      this.cursorBig.style.opacity = 1;
      this.cursorSmall.style.opacity = 1;
    },
    onMouseLeave() {
      this.cursorBig.style.opacity = 0;
      this.cursorSmall.style.opacity = 0;
    },
    onMouseMove(e) {
      this.cursorSmall.style.opacity = 1;
      gsap.to(this.cursorBig, 0.4, {
        x: e.clientX - 18.5,
        y: e.clientY - 18.5,
      });
      gsap.to(this.cursorSmall, 0.1, {
        x: e.clientX - 4,
        y: e.clientY - 4,
      });
    },
    onMouseHover() {
      gsap.to(this.cursorBig, 0.3, {
        scale: 3,
      });
    },
    onMouseHoverOut() {
      gsap.to(this.cursorBig, 0.3, {
        scale: 1,
      });
    },
  },
};

@media screen and (min-width: 1100px) {
  * {
    cursor: none !important;
  }

  .custom-cursor__ball {
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .custom-cursor__ball--big {
    content: "";
    width: 35px;
    height: 35px;
    background: black;
    border-radius: 50%;
  }

  .custom-cursor__ball--small {
    content: "";
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
  }
}