全局点击防抖

103 阅读1分钟

只要在全局入口使用一次,不用再单独处理某个点击事件的防抖

// useDebounceEverywhere by RichDaddyCashMany

import { useLayoutEffect } from 'react'

export const useDebounceEverywhere = (delay = 300) => {
  useLayoutEffect(() => {
    const onClick = e => {
      let element = e.target

      element.style.pointerEvents = 'none'

      let currentElement = element
      while (currentElement.parentElement) {
        currentElement.parentElement.style.pointerEvents = 'none'
        currentElement = currentElement.parentElement
      }

      setTimeout(() => {
        element.style.pointerEvents = ''

        let currentElement = element
        while (currentElement.parentElement) {
          currentElement.parentElement.style.pointerEvents = ''
          currentElement = currentElement.parentElement
        }
      }, delay)
    }

    document.addEventListener('click', onClick)

    return () => {
      document.removeEventListener('click', onClick)
    }
  }, [])
}