ReactJS SyntheticEvent stopPropagation () работает только с событиями React?

Я пытаюсь использовать event.stopPropagation () в компоненте ReactJS, чтобы остановить событие щелчка от всплытия и запуска события щелчка, которое было прикреплено с JQuery в устаревшем коде, но похоже, что stopPropagation () React только останавливает распространение на события также прикреплен к React, а stopPropagation () JQuery не останавливает распространение событий, связанных с React.

Есть ли способ заставить stopPropagation () работать с этими событиями? Я написал простой JSFiddle, чтобы продемонстрировать это поведение:

/** @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 использует делегирование событий с одним включенным прослушивателем documentсобытий для событий, которые всплывают, например «щелчок» в этом примере, что означает, что остановить распространение невозможно; реальное событие уже распространено к тому моменту, когда вы взаимодействуете с ним в React. stopPropagationна синтетическом событии React возможно, потому что React обрабатывает распространение синтетических событий внутри себя.

Рабочий JSFiddle с исправлениями снизу.

React Stop Propagation on jQuery Event

Используйте, Event.stopImmediatePropagationчтобы предотвратить вызов других ваших слушателей (в данном случае jQuery) в корневом каталоге. Он поддерживается в IE9 + и современных браузерах.

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

• Предостережение: слушатели вызываются в том порядке, в котором они связаны. Чтобы это работало, React должен быть инициализирован перед другим кодом (здесь jQuery).

jQuery Остановить распространение при событии React

В вашем коде jQuery также используется делегирование событий, что означает, что вызов stopPropagationобработчика ничего не останавливает; событие уже передано document, и будет запущен слушатель React.

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

Чтобы предотвратить распространение за пределы элемента, слушатель должен быть привязан к самому элементу:

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

Изменить (2016/01/14): Уточнено, что делегирование обязательно используется только для событий, которые всплывают. Для получения дополнительной информации об обработке событий в источнике React есть описательные комментарии: ReactBrowserEventEmitter.js .

Стоит отметить (из этой проблемы ), что если вы прикрепляете события к document, e.stopPropagation()это не поможет. В качестве обходного пути вы можете использовать window.addEventListener()вместо document.addEventListener, тогда event.stopPropagation()событие не будет распространяться в окно.

Это все еще один интересный момент:

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

Используйте эту конструкцию, если ваша функция обернута тегом

Я смог решить эту проблему, добавив в свой компонент следующее:

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

Вчера я столкнулся с этой проблемой, поэтому создал удобное для React решение.

Проверьте response-native-listener . Пока он работает очень хорошо. Обратная связь приветствуется.

Из документации React : Обработчики событий ниже запускаются событием в фазе восходящей цепочки . Чтобы зарегистрировать обработчик событий для фазы захвата, добавьте Capture . (курсив мой)

Если у вас есть прослушиватель событий щелчка в вашем коде React, и вы не хотите, чтобы он всплывал, я думаю, что вы хотите использовать onClickCaptureвместо onClick. Затем вы передадите событие обработчику и сделаете так, event.nativeEvent.stopPropagation()чтобы нативное событие не всплывало до ванильного прослушивателя событий JS (или чего-либо, что не реагирует).

Обновление: теперь вы можете <Elem onClick={ proxy => proxy.stopPropagation() } />

Быстрый обходной путь - использование window.addEventListenerвместо document.addEventListener.