ReactJS SyntheticEvent stopPropagation () hanya bekerja dengan kejadian React?

Saya mencoba menggunakan event.stopPropagation () dalam komponen ReactJS untuk menghentikan event klik menggelembung dan memicu event klik yang dilampirkan dengan JQuery dalam kode lama, tetapi sepertinya stopPropagation () React hanya menghentikan propagasi ke event juga terpasang di React, dan stopPropagation () JQuery tidak menghentikan propagasi ke kejadian yang dilampirkan dengan React.

Apakah ada cara untuk membuat stopPropagation () berfungsi di seluruh peristiwa ini? Saya menulis JSFiddle sederhana untuk menunjukkan perilaku ini:

/** @jsx React.DOM */
var Propagation = React.createClass({
    alert: function(){
        alert('React Alert');
    },
    stopPropagation: function(e){
        e.stopPropagation();
    },
    render: function(){
        return (
            <div>
                <div onClick={this.alert}>
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
                </div>
                <div onClick={this.alert}>
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>
                </div>
            </div>
        );
    }
});

React.renderComponent(<Propagation />, document.body);

$(function(){    
    $(document).on('click', '.alert', function(e){
        alert('Jquery Alert');
    });

    $(document).on('click', '.stop-propagation', function(e){
        e.stopPropagation();
    });
});

React menggunakan event delegation dengan satu event listener documentuntuk event yang menggelembung, seperti 'click' dalam contoh ini, yang berarti menghentikan propagasi tidak dimungkinkan; acara nyata telah disebarkan pada saat Anda berinteraksi dengannya di React. stopPropagationtentang peristiwa sintetis React dimungkinkan karena React menangani penyebaran peristiwa sintetis secara internal.

Bekerja JSFiddle dengan perbaikan dari bawah.

React Stop Propagation di jQuery Event

Gunakan Event.stopImmediatePropagationuntuk mencegah pendengar Anda yang lain (dalam kasus ini) di root dipanggil. Ini didukung di IE9 + dan browser modern.

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},

• Peringatan: Pendengar dipanggil sesuai urutan mereka terikat. React harus diinisialisasi sebelum kode lain (jQuery di sini) untuk bekerja.

jQuery Hentikan Propagasi pada React Event

Kode jQuery Anda juga menggunakan delegasi peristiwa, yang berarti memanggil stopPropagationpenangan tidak menghentikan apa pun; acara telah disebarkan ke document, dan pendengar React akan dipicu.

// Listener bound to `document`, event delegation
$(document).on('click', '.stop-propagation', function(e){
    e.stopPropagation();
});

Untuk mencegah penyebaran di luar elemen, pemroses harus terikat ke elemen itu sendiri:

// Listener bound to `.stop-propagation`, no delegation
$('.stop-propagation').on('click', function(e){
    e.stopPropagation();
});

Sunting (2016/01/14): Memperjelas bahwa delegasi hanya digunakan untuk acara yang menggelembung. Untuk detail lebih lanjut tentang penanganan acara, sumber React memiliki komentar deskriptif: ReactBrowserEventEmitter.js .

Perlu dicatat (dari masalah ini ) bahwa jika Anda melampirkan acara document, e.stopPropagation()tidak akan membantu. Sebagai solusinya, Anda dapat menggunakan window.addEventListener()sebagai ganti document.addEventListener, lalu event.stopPropagation()akan menghentikan penyebaran acara ke jendela.

Ini masih satu momen yang menarik:

ev.preventDefault()
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();

Gunakan konstruksi ini, jika fungsi Anda dibungkus oleh tag

Saya dapat menyelesaikan ini dengan menambahkan yang berikut ini ke komponen saya:

componentDidMount() {
  ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
    event.stopPropagation();
  }, false);
}

Saya mengalami masalah ini kemarin, jadi saya membuat solusi yang ramah Bereaksi.

Lihat react-native-listener . Ini bekerja dengan sangat baik sejauh ini. Umpan balik dihargai.

Dari dokumentasi React : Event handler di bawah ini dipicu oleh event dalam fase gelembung . Untuk mendaftarkan event handler untuk fase pengambilan, tambahkan Capture . (penekanan ditambahkan)

Jika Anda memiliki klik pendengar acara dalam kode Bereaksi Anda dan Anda tidak ingin meluap, saya pikir apa yang ingin Anda lakukan adalah menggunakan onClickCapturebukan onClick. Kemudian Anda akan meneruskan acara ke penangan dan melakukan event.nativeEvent.stopPropagation()untuk menjaga acara asli agar tidak menggelembung ke pendengar acara vanilla JS (atau apa pun yang tidak bereaksi).

Pembaruan: Anda sekarang bisa <Elem onClick={ proxy => proxy.stopPropagation() } />

Solusi cepat digunakan window.addEventListeneralih-alih document.addEventListener.