React.js鼠标，触摸事件不能只在移动屏幕上工作

Question

这个问题的React, javascript, CSS代码

我有一些问题在我的代码和我应该粘贴我的代码，但它是太长粘贴在这里，所以我留下我的一些代码在这里的人谁不能得到我的链接，我的完整代码是在我的链接!另外，您可以在下面的链接上看到输出屏幕!

输出屏幕

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}作为选项来解决!我要把这个问题留给将来需要的人!