javascript - Lier les événements et empêcher les événements de se propager dans React

Question

Passons directement au code. J'y réfléchis depuis longtemps et je ne sais pas où est le problème.

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

Cette fonction est similaire à la barre de navigation en haut de Taobao, sauf que j'utilise ici les événements de clic. Maintenant, j'annule le bouillonnement lorsque je déclenche le spreadHandler, mais l'événement click du document sera toujours déclenché. Je ne sais pas si c'est parce que l'événement est lié à la balise a, ou s'il est causé par une autre raison. Quelqu'un sait ce qui se passe ?

Answer 1

Empêcher le bouillonnement dans les événements synthétiques de React ne peut pas annuler le bouillonnement des événements natifs.
Empêcher le bouillonnement dans les événements synthétiques de React
Vous devriez donc essayer d'éviter de les mélanger, et cela doit être utilisé. Si c'est le cas, vous pouvez ajouter. une couche de jugement dans le gestionnaire d'événements de document.

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

Answer 2

e.preventDeafult()

Answer 3

Essayez ceci :

e.nativeEvent.stopImmediatePropagation();

Le mécanisme d'événement de React est différent de celui de js natif.

Answer 4

Les événements synthétiques de React sont tous implémentés via le proxy d'événement lié au clic sur le document, il est donc impossible d'empêcher le traitement d'autres événements sur le document en empêchant les événements synthétiques de bouillonner (déjà diffusés dans le document), vous devez donc utiliser Événement natif