diff --git a/components/CursorDot.js b/components/CursorDot.js index 1e00001e..7fb36603 100644 --- a/components/CursorDot.js +++ b/components/CursorDot.js @@ -1,7 +1,9 @@ -import { RouteMatcher } from 'next/dist/server/future/route-matchers/route-matcher'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; - +/** + * 白点鼠标跟随 + * @returns + */ const CursorDot = () => { const router = useRouter(); useEffect(() => { @@ -31,13 +33,15 @@ const CursorDot = () => { // 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听 - const clickableElements = document.querySelectorAll( - 'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]' - ); - clickableElements.forEach((el) => { - el.addEventListener('mouseenter', handleMouseEnter); - el.addEventListener('mouseleave', handleMouseLeave); - }); + setTimeout(() => { + const clickableElements = document.querySelectorAll( + 'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]' + ); + clickableElements.forEach((el) => { + el.addEventListener('mouseenter', handleMouseEnter); + el.addEventListener('mouseleave', handleMouseLeave); + }); + }, 200); // 延时 200ms 执行 // 动画循环:延迟更新小白点位置 const updateDotPosition = () => { @@ -58,6 +62,9 @@ const CursorDot = () => { // 清理函数 return () => { document.removeEventListener('mousemove', handleMouseMove); + const clickableElements = document.querySelectorAll( + 'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]' + ); clickableElements.forEach((el) => { el.removeEventListener('mouseenter', handleMouseEnter); el.removeEventListener('mouseleave', handleMouseLeave);