javascript – Binden von Ereignissen und Verhindern des Sprudelns von Ereignissen in React

Question

Kommen wir gleich zum Code. Ich habe lange darüber nachgedacht und weiß nicht, wo das Problem liegt.

    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
        })
    }

Diese Funktion ähnelt der Navigationsleiste oben in Taobao, außer dass ich hier Klickereignisse verwende. Jetzt breche ich das Sprudeln ab, wenn ich den SpreadHandler auslöse, aber das Klickereignis des Dokuments wird weiterhin ausgelöst. Ich weiß nicht, ob es daran liegt, dass das Ereignis an das Tag a gebunden ist, oder ob es einen anderen Grund hat. Weiß jemand, was los ist?

Answer 1

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

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

Answer 2

e.preventDeafult()

Answer 3

试试这个：

e.nativeEvent.stopImmediatePropagation();

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

Answer 4

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