Javascript 我的下拉列表没有'；在以前的iOS上，当我在它之外单击时，它不会关闭

我正在处理一个下拉列表，当我在它外面单击时，希望它关闭。我所做的在Chrome上、在我尝试使用的所有Android设备上以及在iOS 13上使用的所有iPhone上都有效，但在旧设备上不起作用。我试着用不同的方法去做，但是没有一种方法是有效的。。。 如果有人想帮忙，这是我的代码

  const wrapperRef = useRef(null)
  const [scrollToggle, changeScrollToggle] = useState(false)
  const alteredPriceRange = [defaultValue].concat(priceRange)

  const slideToggle = () => {
    if (scrollToggle) {
      changeScrollToggle(false)
    } else {
      changeScrollToggle(true)
    }
  }

  const handleClickOutside = (e) => {
    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
      changeScrollToggle(false)
    } else {
    }
  }

  const optionSorter = (price) => {
    return price === 'min' || price === 'max' ? <>{`No ${price}`}</> : <><span>£</span> {price}</>
  }

  const selectedInput = () => {
    return currentValue === '' ? defaultValue : currentValue
  }

  useEffect(() => {
    const setHeight = slideRef => {
      if (scrollToggle) {
        slideRef.current.style.height = `${slideRef.current.firstChild.getBoundingClientRect().height}px`
      } else {
        slideRef.current.style.height = 0
      }
    }
    setHeight(slideRef)
  }, [scrollToggle])

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])

  return (
    <Fragment>
      <div ref={wrapperRef} className={`dropdown-wrapper ${scrollToggle ? 'dropdown-active' : ''}`}>
        <div
          id={`dropdown-selector-${idValue}`}
          className='dropdown-field'
          onClick={() => { slideToggle() }}
        >
          <p>
            <span className='currency'>£</span><span className='money'>
              {selectedInput()}
            </span>
          </p>
          <span className='caret'>
            <img src={caret} alt='caret' />
          </span>
        </div>
        <div className='scroll-content-wrapper'>
          <div className='scroll-block' ref={slideRef}>
            <Picklist className={'area'}>
              {alteredPriceRange.map((price, i) =>
                <div
                  id={`${idValue}-price-option-${i}`}
                  key={i}
                  onClick={(e) => {
                    selectClick(e, price, defaultValue)
                    slideToggle()
                  }}
                >
                  {optionSorter(price)}
                </div>
              )
              }

            </Picklist>
          </div>

        </div>
      </div>
    </Fragment>
  )
}

const wrapperRef=useRef（null）
常量[scrollToggle，changeScrollToggle]=useState（false）
常量alteredPriceRange=[defaultValue].concat（priceRange）
常量滑动切换=（）=>{
如果（滚动切换）{
changeScrollToggle（错误）
}否则{
changeScrollToggle（真）
}
}
常量handleClickOutside=（e）=>{
if（wrapperRef.current&！wrapperRef.current.contains（e.target））{
changeScrollToggle（错误）
}否则{
}
}
常量选项排序器=（价格）=>{
返回价格=='min'| price=='max'？{'No${price}}}：£{price}
}
常量selectedInput=（）=>{
返回currentValue==''？默认值：currentValue
}
useffect（（）=>{
const setHeight=slideRef=>{
如果（滚动切换）{
slideRef.current.style.height=`${slideRef.current.firstChild.getBoundingClientRect（）.height}px`
}否则{
slideRef.current.style.height=0
}
}
设置高度（滑动高度）
}，[scrollToggle]）
useffect（（）=>{
document.addEventListener（'mousedown'，handleclickout）
return（）=>{
document.removeEventListener（'mousedown'，handleClickOutside）
}
}, [])
返回(
{slideToggle（）}}
>

£
{selectedInput（）}

{alteredPriceRange.map（（价格，i）=>
{
选择单击（e、价格、默认值）
滑动切换（）
}}
>
{选项排序器（价格）}
)
}
)
}

谢谢

尝试使用

当用户触摸某个元素时，会发生touchstart事件

注意：touchstart事件仅适用于带有触摸屏的设备

const handleClickOutside=（e）=>{
如果（e.type==“touchstart”）e.preventDefault（）；//{
document.addEventListener（'touchstart'，handleClickOutside）//{
document.removeEventListener（'touchstart'，handleClickOutside）//