react 中绑定事件和阻止事件冒泡

直接上代码吧,我是想了半天不知道哪里出问题了。

    state = {
        spread: false
    }

    componentDidMount() {
        console.log('document clicked')
        document.onclick = () => {
            if(this.state.spread) {
                this.setState({
                    spread: false
                })
            }
        }
    }

    spreadHandler (e) {
        console.log('target clicked')
        // 这个事件绑定在一个 a 标签上
        e.stopPropagation()
        this.setState({
            spread: !this.state.spread
        })
    }

这个功能就是一个类似淘宝顶部导航条的功能,只不过我这里用的是点击事件。现在我触发spreadHandler的时候取消了冒泡,但是document的click事件还是会触发。不知道是因为事件绑定在 a 标签上,还是别的什么原因造成的,有人知道这是怎么回事吗?

阅读 8k
5 个回答

react 的合成事件中的阻止冒泡, 是无法取消原生事件冒泡的.
原生事件中阻止冒泡行为, 反而可以阻止 react 合成事件中的冒泡.
所以应该尽量避免混用, 非用不可的话, 可以在 document 的事件处理程序中加一层判断.

document.addEventListener('click', function(e){
    // 类似事件委托, 判断一下发生事件的元素.
    if( e.target.nodeName.toLowerCase() === 'a' ) {
        return;
    }
}, false);

试试这个:

e.nativeEvent.stopImmediatePropagation();

react的事件机制与原生js的事件机制是有所区别的。

e.preventDeafult()

react的合成事件都是通过绑定在document上click的事件代理实现的,所以无法通过阻止合成事件冒泡(已将冒到document上了)来阻止docuemnt上的其他事件处理,所以得用原生事件

新手上路,请多包涵

试过e.nativeEvent.stopImmediatePropagation(),还是不行,但是将事件的注册document.addEventListener,放在conponentDidMount而不是conponentWillMount中即可生效了,

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏