代码之家 › 专栏 › 技术社区 › Femi Oni

在react事件冒泡中使用e.preventDefault取消控制盘事件

mousewheel scrollbar javascript-events reactjs

0

Femi Oni · 技术社区 · 5 年前

我正在努力防止窗口滚动 e.preventDefault() 当一个控制盘事件被触发,但不管发生什么,浏览器都会滚动。

<div onWheel={this.handleWheelEvent} >
  <div className='yellow fullpage'>Yellow Page</div>
  <div className='green fullpage'>Green Page</div>
  <div className='blue fullpage'>Yellow Page</div>
</div>

js

handleWheelEvent = e => {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    // those 3 should prevent browser from scrolling but they don't
}

0 回复 | 直到 5 年前

1

6

Remzi Atay 4 年前

我找不到一种方法来防止在React事件中滚动,但使用refs可以达到同样的效果

在构造函数中:

this.divRef = React.createRef()
this.preventDefault = e => e.preventDefault()

在渲染中:

<div ref={this.divRef} >
  <div className='yellow fullpage'>Yellow Page</div>
  <div className='green fullpage'>Green Page</div>
  <div className='blue fullpage'>Yellow Page</div>
</div>

添加和删除默认事件侦听器:

componentDidMount () {
    this.divRef.current.addEventListener('wheel', this.preventDefault)
}

componentWillUnmount () {
    this.divRef.current.removeEventListener('wheel', this.preventDefault)
}

2

3

vsync 3 年前

React绑定根元素上的所有事件(而不是 document ),以及 wheel 事件是使用 true option ,我引用MDN的话:

一个布尔值,如果为true,则表示侦听器指定的函数永远不会调用preventDefault()。如果被动侦听器调用preventDefault(),则用户代理只会生成控制台警告

这就是我在使用滚轮影响输入字段时阻止页面滚动的方式:

const wheelTimeout = useRef()

const onWheel = e => {
    // ... some code I needed ...

    // while wheel is moving, do not release the lock
    clearTimeout(wheelTimeout.current)

    // flag indicating to lock page scrolling (setTimeout returns a number)
    wheelTimeout.current = setTimeout(() => {
      wheelTimeout.current = false
    }, 300)
}

// block the body from scrolling (or any other element)
useEffect(() => {
    const cancelWheel = e => wheelTimeout.current && e.preventDefault()
    document.body.addEventListener('wheel', cancelWheel, {passive:false})
    return () => document.body.removeEventListener('wheel', cancelWheel)
}, [])

参考讨论:

https://github.com/facebook/react/issues/14856

3

-1

mrghofrani user1901469 3 年前

你不能使用– event.preventDefault() 内部事件onScroll,因为默认值在页面滚动后应用。但您可以在以下事件中使用prevetDefault:

驾驶
onKeydown
翻页
翻页

4

-3

RomanistHere 4 年前

<div onWheel={e => e.stopPropagation()}></div>

试试这个