更新

project/src/pages/A4member/index.tsx

@@ -4,17 +4,24 @@ import MenuSider from '@/components/MenuSider'
 import Zvideo from '@/components/Zvideo'
 import Zback from '@/components/Zback'
 import { baseOssUrl } from '@/utils/http'
+import { isTouchPreferredFu } from '@/utils/history'
 function A4Member() {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [currentIndex, setCurrentIndex] = useState(0)
-  const [hasHover, setHasHover] = useState(true)
+  const [isTouchPreferred, setIsTouchPreferred] = useState(false)
   const [isShowVideo, setIsShowVideo] = useState(false)
   useEffect(() => {
-    const mq = window.matchMedia('(hover: hover)')
-    setHasHover(mq.matches)
-    const handler = (e: MediaQueryListEvent) => setHasHover(e.matches)
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
+    const mqAnyPointerCoarse = window.matchMedia('(any-pointer: coarse)')
+    const mqPointerCoarse = window.matchMedia('(pointer: coarse)')
+    const updateTouchPreferred = () => setIsTouchPreferred(isTouchPreferredFu())
+
+    updateTouchPreferred()
+    mqAnyPointerCoarse.addEventListener('change', updateTouchPreferred)
+    mqPointerCoarse.addEventListener('change', updateTouchPreferred)
+    return () => {
+      mqAnyPointerCoarse.removeEventListener('change', updateTouchPreferred)
+      mqPointerCoarse.removeEventListener('change', updateTouchPreferred)
+    }
   }, [])
   useEffect(() => {
     const el = scrollRef.current
@@ -37,8 +44,8 @@ function A4Member() {
             <div
               className={`item ${currentIndex === index ? `itemAc itemAc${index + 1}` : ''}`}
               key={index}
-              onMouseEnter={hasHover ? () => setCurrentIndex(index) : undefined}
-              onClick={!hasHover ? () => setCurrentIndex(index) : () => setIsShowVideo(true)}
+              onMouseEnter={!isTouchPreferred ? () => setCurrentIndex(index) : undefined}
+              onClick={isTouchPreferred ? () => setCurrentIndex(index) : () => setIsShowVideo(true)}
             >
               <div className='nameBox'>
                 <div className='up'>
@@ -79,7 +86,7 @@ function A4Member() {
                 <div className='nameEn'>{item.nameEn}</div>
               </div>
               {/* 在一体机有按钮 */}
-              {!hasHover ? (
+              {isTouchPreferred ? (
                 <div className='btnBox' onClick={() => setIsShowVideo(true)}>
                   <img
                     draggable={false}

project/src/utils/history.ts

@@ -54,3 +54,12 @@ export const callIframeFu = (fuName: string, params: any,type?:string) => {
   }
 };
 
+
+// 判断是否触控优先（复用 A4member 逻辑）
+export const isTouchPreferredFu = () => {
+  return (
+    navigator.maxTouchPoints > 0 ||
+    window.matchMedia('(any-pointer: coarse)').matches ||
+    window.matchMedia('(pointer: coarse)').matches
+  )
+}