React中禁止鼠标滚动事件

859 阅读1分钟
  const divRef = useRef(null)

  useEffect(() => {
    //禁用鼠标滚动事件 passive不写默认为true
    //滚轮事件wheel替换了已被弃用的非标准[`mousewheel`]事件。
    divRef.current.addEventListener('wheel', closeDefault, { passive: false })
    return ()=> divRef.current.removeEventListener('wheel', closeDefault, { passive: false })   
  }, [])
  
    //取消默认事件
  function closeDefault(e) {
    if (e.preventDefault) {
      e.preventDefault()  //取消事件的默认行为
      e.stopPropagation() //阻止冒泡
    } else {
      //兼容IE
      window.event.preventDefault = false //IE下取消事件的默认行为
      e.cancelBubble = true               //IE下阻止冒泡
    }
    return false
  }
  
 <div ref={divRef}>