React.js 鼠标，触摸事件不仅仅在手机屏幕上起作用

Question

React, javascript, CSS codes for this problem

我的 codepen 代码有一些问题，我应该粘贴我的代码，但粘贴在这里太长了，所以我把我的几个代码留在这里给那些无法访问我的链接的人，我的完整代码已开启我的链接！另外，您可以在链接下方看到输出屏幕！

Output screen

const { useEffect, useState, useCallback, useRef } = React
const INITIAL_PERCENT = 10
const MAX_PERCENT = 90

const App = () => {
  const containerRef = useRef()
  const barRef = useRef()
  const [info, setInfo] = useState({
    isSliding: false,
    currentPercent: INITIAL_PERCENT
  })
  
  function getPercent(clientX) {
    const dims = containerRef.current.getBoundingClientRect()
    return ((clientX - dims.left) / dims.width) * 100
  }
  
  const onMouseDown = useCallback(e => {
    e.preventDefault()
    if (info.isSliding === true) return
    console.log('mouse down')
    const percent = getPercent(e.clientX || e.touches[0].clientX)
    setInfo({
      isSliding: true,
      currentPercent: percent > MAX_PERCENT ? MAX_PERCENT : percent
    }, () => {
      barRef.current.style.transition = 'none'
    })
  }, [info.isSliding])
  
  const onMouseMove =  useCallback(e => {
    const percent = getPercent(e.clientX || e.touches[0].clientX)
    setInfo(state => ({
      ...state,
      currentPercent: (percent > MAX_PERCENT) ? MAX_PERCENT : 
                      (percent < INITIAL_PERCENT) ? INITIAL_PERCENT : percent
    }))
  }, [])
  
  const onMouseUp =  useCallback(e => {
    e.preventDefault()
    console.log('mouse up')
    const percent = getPercent(e.clientX || e.changedTouches[0].clientX)
    setInfo(state => ({
      ...state,
      isSliding: false,
      currentPercent: (percent > MAX_PERCENT) ? MAX_PERCENT : INITIAL_PERCENT
    }))
  }, [])
  
  // Resizing Width Animation starts only if mouse is up
  useEffect(() => {
    if (info.isSliding === false) {
      barRef.current.classList.add('slide')
    } else {
      barRef.current.classList.remove('slide')
    }
  }, [info.isSliding])
  
  // Animation for 100% compeleted
  useEffect(() => {
    if (info.isSliding === false && info.currentPercent >= MAX_PERCENT) {
      barRef.current.classList.add('complete')
    } else {
      barRef.current.classList.remove('complete')
    }
  }, [info.isSliding, info.currentPercent])
  
  // added 'passive -> false' to prevent touchstart fires twice on Mobile screen.
  useEffect(() => { 
    containerRef.current.addEventListener('touchstart', onMouseDown, { passive: false })
    return () => containerRef.current.removeEventListener('touchstart', onMouseDown, { passive: false })
  }, [])
  
  useEffect(() => {
    if (info.isSliding === true) {
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('touchmove', onMouseMove);
      window.addEventListener('mouseup', onMouseUp);
      window.addEventListener('touchend', onMouseUp);
    }
    return () => {
      window.removeEventListener('mousemove', onMouseMove)
      window.removeEventListener('touchmove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);;
      window.removeEventListener('touchend', onMouseUp);
    }
  }, [info.isSliding])
  
  return (
    <div className='wrapper'>
      <div className='states-info'>
        isSliding : {String(info.isSliding)} <br />
        currentPercent : {parseInt(info.currentPercent)}
        
      </div>
      <div className='container' onMouseDown={onMouseDown} ref={containerRef}>
        <div className='bar' ref={barRef} style={{width: `${info.currentPercent}%`}} />
        <div className='btn' />
      </div>
    </div>
  )
}
ReactDOM.render( <App/>, document.getElementById("root") )

我的问题是 React 滑动条 css 过渡在桌面网站和 F12 开发模式下的移动版本上完美运行，所以我期待它应该在我的手机（IOS）上运行，但动画（过渡宽度）不起作用即使我没有在 Android 手机上结账。

如果它在桌面上完美运行，那么可能会有解决这个问题的方法，但我几天都找不到它......我需要让它在移动设备上运行。请任何人检查我的代码并帮助我。谢谢！

Answer 1

可以通过在 addEventListener 和 removeEventListener 上添加 { capture: true } 作为选项来解决！ 我会把这个问题留给将来需要这个的人！