ReactJS SyntheticEvent stopPropagation () працює лише з подіями React?

Я намагаюся використовувати event.stopPropagation () в компоненті ReactJS, щоб зупинити події клацання з пухирців і викликати подію натискання, яка була приєднана до JQuery у застарілому коді, але, схоже, stopPropagation React () лише зупиняє розповсюдження подій також додається в React, і зупинка розширення 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 з виправленнями знизу.

Реагуйте на зупинку розповсюдження на події jQuery

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

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

• Застереження: слухачі називаються в тому порядку, в якому вони пов'язані. Реакт повинен бути ініціалізований перед іншим кодом (тут 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();
});

Редагувати (01.01.2014): Уточнено, що делегування обов'язково використовується лише для подій, які спливають. Для отримання більш детальної інформації про події, джерело 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 : Обробники подій, наведені нижче, ініціюються подією у фазі кипіння . Щоб зареєструвати обробник подій для етапу зйомки, додайте Capture . (наголос додано)

Якщо у вашому коді React у вас є слухач подій клацання, і ви не хочете, щоб він міхурів, я думаю, що onClickCaptureзамість цього ви хочете скористатися onClick. Тоді ви передасте подію оброблювачу і зробите, event.nativeEvent.stopPropagation()щоб утримати подію не киплять до слухача події ванільної JS (або нічого, що не реагує).

Оновлення: Ви можете зараз <Elem onClick={ proxy => proxy.stopPropagation() } />

window.addEventListenerЗамість цього використовується швидке вирішення document.addEventListener.