当我在以前的 iOS 上单击它的外部时，我的下拉菜单没有关闭答案

【问题标题】：My dropdown doesn't close when I click outside of it on previous iOS当我在以前的 iOS 上单击它的外部时，我的下拉菜单没有关闭
【发布时间】：2020-06-22 15:29:15
【问题描述】：

我正在处理一个下拉菜单，并希望在我点击它外部时关闭它。我所做的工作适用于 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>
  )
}

谢谢

【问题讨论】：

标签： javascript reactjs react-hooks ref

【解决方案1】：

尝试使用touchstart event

touchstart 事件在用户触摸元素时发生。

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

  const handleClickOutside = (e) => {
    if (e.type === "touchstart") e.preventDefault();  // <- new line
    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
      changeScrollToggle(false)
    } else {
    }
  }

  // ...

  useEffect(() => {
    document.addEventListener('touchstart', handleClickOutside)  // <- new line
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('touchstart', handleClickOutside)  // <- new line
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])

注意：未测试此代码！

【讨论】：