javascript - Mengikat peristiwa dan mencegah peristiwa menggelegak dalam tindak balas

Question

Jom terus ke kod Saya sudah lama memikirkannya dan tidak tahu di mana masalahnya.

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

Fungsi ini serupa dengan bar navigasi di bahagian atas Taobao, kecuali saya menggunakan acara klik di sini. Sekarang saya membatalkan gelembung apabila saya mencetuskan spreadHandler, tetapi peristiwa klik dokumen masih akan dicetuskan. Saya tidak tahu sama ada peristiwa itu terikat pada teg, atau jika ia disebabkan oleh sebab lain Adakah sesiapa tahu apa yang berlaku?

Answer 1

Mencegah menggelegak dalam peristiwa sintetik react tidak boleh membatalkan menggelegak peristiwa asli
Mencegah menggelegak dalam peristiwa asli boleh menghalang menggelegak dalam peristiwa sintetik react
Jadi anda harus cuba mengelakkan mencampurkannya, dan ia mesti digunakan Jika ya, anda boleh menambah lapisan pertimbangan dalam pengendali acara dokumen.

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

Answer 2

e.preventDeafult()

Answer 3

Cuba ini:

e.nativeEvent.stopImmediatePropagation();

Mekanisme acara React berbeza daripada js asli.

Answer 4

Peristiwa sintetik React semuanya dilaksanakan melalui proksi acara yang terikat pada klik pada dokumen, jadi adalah mustahil untuk menghalang pemprosesan acara lain pada dokumen dengan menghalang peristiwa sintetik daripada menggelegak (sudah berbuih pada dokumen), jadi anda perlu menggunakan Acara asli