ReactJS SyntheticEvent stopPropagation () działa tylko ze zdarzeniami React?

Próbuję użyć zdarzenia event.stopPropagation () w komponencie ReactJS, aby zatrzymać propagację zdarzenia kliknięcia i wyzwolenie zdarzenia kliknięcia, które zostało dołączone do JQuery w starszym kodzie, ale wygląda na to, że stopPropagation () Reacta zatrzymuje tylko propagację do zdarzeń również dołączony w Reakcie, a stopPropagation () JQuery nie zatrzymuje propagacji do zdarzeń dołączonych do React.

Czy istnieje sposób, aby funkcja stopPropagation () działała w przypadku tych zdarzeń? Napisałem prosty JSFiddle, aby zademonstrować następujące zachowania:

/** @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 używa delegowania zdarzeń z włączonym jednym nasłuchiwaniem documentdla zdarzeń, które są w dymku, jak na przykład „kliknięcie” w tym przykładzie, co oznacza, że ​​zatrzymanie propagacji nie jest możliwe; rzeczywiste zdarzenie zostało już rozpropagowane do czasu interakcji z nim w Reakcie. stopPropagationna syntetycznym zdarzeniu Reacta jest możliwe, ponieważ React obsługuje wewnętrzną propagację zdarzeń syntetycznych.

Działa JSFiddle z poprawkami od dołu.

React Stop Propagation on jQuery Event

Służy Event.stopImmediatePropagationdo zapobiegania wywoływaniu innych słuchaczy (w tym przypadku jQuery) w katalogu głównym. Jest obsługiwany w IE9 + i nowoczesnych przeglądarkach.

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

• Uwaga: słuchacze są wywoływani w kolejności, w jakiej są związani. Aby to zadziałało, React musi zostać zainicjowany przed innym kodem (tutaj jQuery).

jQuery Stop Propagation on React Event

Twój kod jQuery również używa delegowania zdarzeń, co oznacza, że ​​wywołanie stopPropagationprocedury obsługi niczego nie zatrzymuje; zdarzenie zostało już rozpropagowane do document, a detektor Reacta zostanie uruchomiony.

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

Aby zapobiec propagacji poza element, odbiornik musi być powiązany z samym elementem:

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

Edycja (2016/01/14): Wyjaśniono, że delegacja jest koniecznie używana tylko w przypadku wydarzeń w dymku. Aby uzyskać więcej informacji na temat obsługi zdarzeń, źródło Reacta zawiera opisowe komentarze: ReactBrowserEventEmitter.js .

Warto zauważyć (na podstawie tego wydania ), że jeśli dołączasz wydarzenia do document, e.stopPropagation()nie pomoże. Aby obejść ten problem, możesz użyć window.addEventListener()zamiast document.addEventListener, a następnie event.stopPropagation()zatrzyma propagację zdarzenia do okna.

To wciąż jeden interesujący moment:

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

Użyj tej konstrukcji, jeśli twoja funkcja jest opakowana tagiem

Udało mi się rozwiązać ten problem, dodając następujące elementy do mojego komponentu:

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

Wczoraj napotkałem ten problem, więc stworzyłem rozwiązanie przyjazne Reactowi.

Wypróbuj reagować na natywne-nasłuchiwanie . Jak dotąd działa bardzo dobrze. Opinie mile widziane.

Z dokumentacji Reacta : poniższe programy obsługi zdarzeń są wyzwalane przez zdarzenie w fazie propagacji . Aby zarejestrować procedurę obsługi zdarzeń dla fazy przechwytywania, dołącz Capture . (podkreślenie dodane)

Jeśli masz odbiornik zdarzeń kliknięcia w swoim kodzie Reacta i nie chcesz, aby był widoczny, myślę, że onClickCapturezamiast tego chcesz go użyć onClick. Następnie przekazałbyś zdarzenie do modułu obsługi i zrobiłbyś, event.nativeEvent.stopPropagation()aby natywne zdarzenie nie przepływało do zwykłego nasłuchiwania zdarzeń JS (lub czegokolwiek, co nie reaguje).

Aktualizacja: możesz teraz <Elem onClick={ proxy => proxy.stopPropagation() } />

Szybkim obejściem jest użycie window.addEventListenerzamiast document.addEventListener.