ReactJS SyntheticEvent stopPropagation () yalnızca React olaylarıyla mı çalışır?

Bir tıklama olayının köpürmesini ve eski kodda JQuery ile eklenmiş bir tıklama olayını tetiklemesini durdurmak için bir ReactJS bileşeni içinde event.stopPropagation () kullanmaya çalışıyorum, ancak React'in stopPropagation () yalnızca olaylara yayılmayı durduruyor gibi görünüyor React'e de eklenmiştir ve JQuery'nin stopPropagation () işlevi, React ile eklenmiş olaylara yayılmayı durdurmaz.

StopPropagation () işlevinin bu olaylarda çalışmasını sağlamanın bir yolu var mı? Bu davranışları göstermek için basit bir JSFiddle yazdım :

/** @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, documentbu örnekteki 'tıklama' gibi kabarcık oluşturan olaylar için tek bir olay dinleyicisi ile olay yetkilendirmesini kullanır , bu da yayılmayı durdurmanın mümkün olmadığı anlamına gelir; gerçek olay, React'te onunla etkileşim kurduğunuzda zaten yayılmıştır. stopPropagationReact'in sentetik olayı, React'in dahili olarak sentetik olayların yayılmasını yönetmesi nedeniyle mümkündür.

JSFiddle'ı aşağıdan düzeltmelerle çalışmak .

JQuery Olayında Yayılmayı Durdurma React

Event.stopImmediatePropagationKökteki diğer (bu durumda jQuery) dinleyicilerinizin çağrılmasını önlemek için kullanın . IE9 + ve modern tarayıcılarda desteklenmektedir.

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

• Uyarı: Dinleyiciler, bağlı oldukları sıraya göre çağrılır. Bunun çalışması için React, diğer kodlardan (jQuery burada) önce başlatılmalıdır.

jQuery React Olayında Yayılmayı Durdur

JQuery kodunuz olay yetkilendirmesini de kullanır, bu da stopPropagationişleyicide aramanın hiçbir şeyi durdurmadığı anlamına gelir ; olay zaten yayılmıştır documentve React'in dinleyicisi tetiklenecektir.

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

Öğenin ötesine yayılmayı önlemek için dinleyicinin öğenin kendisine bağlanması gerekir:

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

Düzenleme (2016/01/14): Yetkilendirmenin yalnızca balon oluşturan etkinlikler için kullanılması gerektiği açıklandı . Olay işleme hakkında daha fazla ayrıntı için, React'in kaynağında açıklayıcı yorumlar bulunur: ReactBrowserEventEmitter.js .

Worth (dan belirterek bu konuda size olayları takılarak eğer o) document, e.stopPropagation()yardım gitmiyor. Geçici bir çözüm olarak, window.addEventListener()yerine kullanabilirsiniz document.addEventListener, ardından event.stopPropagation()olayın pencereye yayılmasını durdurur.

Hâlâ ilginç bir an:

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

İşleviniz etiketle sarmalanmışsa bu yapıyı kullanın

Bunu bileşenime aşağıdakileri ekleyerek çözebildim:

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

Dün bu problemle karşılaştım, bu yüzden React dostu bir çözüm yarattım.

React-native-listener'a göz atın . Şimdiye kadar çok iyi çalışıyor. Geri bildirim takdir edildi.

Gönderen belgelere tepki : Aşağıdaki olay işleyicileri vardır tetiklenen bir olayın köpürme aşamasına . Yakalama aşaması için bir olay işleyicisi kaydetmek için Yakalama ekleyin . (vurgu eklenmiştir)

React kodunuzda bir tıklama olayı dinleyiciniz varsa ve bunun kabarmasını istemiyorsanız, onClickCapturebunun yerine kullanmak istediğinizi düşünüyorum onClick. Ardından olayı işleyiciye iletir ve event.nativeEvent.stopPropagation()yerel olayın bir vanilya JS olay dinleyicisine (veya tepki vermeyen herhangi bir şeye) köpürmesini engellemek için yaparsınız .

Güncelleme: Şimdi yapabilirsiniz <Elem onClick={ proxy => proxy.stopPropagation() } />

Hızlı bir çözüm kullanıyor window.addEventListeneryerine document.addEventListener.