React stoppropagation не работает

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

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

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

7 ответов

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

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

Обновление: теперь вы можете proxy.stopPropagation() >/>

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

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

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

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

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

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

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

Источник

stopPropagation не работает

Я пытаюсь реализовать ссылку внутри блока DIV, который имеет событие щелчка.

Я хотел бы, чтобы внешнее событие щелчка DIV не запускалось, если пользователи нажимают на ссылку.

Моя ссылка выглядит так:

И javascript выглядит так:

К сожалению, когда я нажимаю на ссылку, он выполняет внешний код DIV. И показывает ошибку, связанную с методом stopPropogation:

В чем может быть проблема?

3 ответа

Изменить . Я солгал; stopPropagation не является эксклюзивным для jQuery. Перейдите с ответом j08691.

Насколько я знаю, stopPropagation — это функция jQuery, а это значит, что для ее вызова вам понадобится объект события, созданный обработчиком события jQuery.

Вот один из способов:

Возьмите то, что я только что написал, с крошкой соли, конечно, потому что я ухожу от туманных знаний и вообще не смотрю на это.

Я вижу, что вы используете JQuery. Это не предназначено для использования таким образом. Объект события, который вы передаете, является родным объектом события браузера. Объект события jQuery предоставляет функцию stopPropagation.

Чтобы правильно использовать jQuery, вы должны позволить jQuery связывать событие, а не делать его встроенным.

Редактировать: в jQuery 1.4.3 или более поздней версии вы можете использовать делегата, поэтому вам не нужно прикреплять событие непосредственно к якору, а к одному из его предков. (jQuery 1.7 использует метод .on для достижения того же самого). Вот пример использования jQuery 1.7: http://jsfiddle.net/Tu9Hm/

Вы платите небольшой штраф за производительность, используя делегатов, поэтому постарайтесь разместить событие на самом низком элементе в DOM. Кроме того, если вы поместите делегата в документ, вы не сможете остановить StopPropation, поскольку он уже достиг вершины, хотя я полагаю, что вы действительно больше обеспокоены preventDefault()

Источник

Почему не срабатывает event.stopPropagation() после перезагрузки страницы?

Есть блок, при клике на который отображается всплывающее окно. В этом блоке есть кнопка, при клике на которую отображается другое всплывающее окно. Для лучшего понимания я набросал простой пример — jsfiddle.net/e5REB/5 , в котором, конечно же, все работает хорошо.

Но в моем случае существует один непонятный «баг»: после перезагрузки страницы я кликаю по внешнему блоку — всплывает окно, закрываю его, кликаю по кнопке внутри этого блока — всплывает окно для внешнего блока, закрывается и всплывает окно уже для кнопки. Дальше все работает как надо. То есть, после очередной загрузки страницы event.stopPropagation() почему-то не срабатывает в первый раз.

Причем, интересный факт: если я перезагрузил страницу и сразу кликнул по кнопке внутри блока, то все сработало как надо, а вот при вызове сначала внешнего, а потом внутреннего события, возникает подобная проблема. Подскажите, в чем мой косяк?

• Вопрос задан более трёх лет назад
• 3396 просмотров

Не совсем понимаю почему, но проблема оказалась в делегировании события у кнопок, которые находятся внутри блоков. Теперь, вместо назначения события общей обертки приходится назначать его каждой кнопке отдельно. Т.е. вместо:

Если кому несложно посмотреть мой пример и объяснить, почему, собственно, возникала данная проблема и почему она решается именно так, то буду очень благодарен.

Источник

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

Я пытаюсь использовать event.это происходит() в ReactJS компонент, чтобы остановить события click от бурлят и вызывая событие click, которое было прикреплено с помощью jQuery в legacy код, но кажется, что Реакт это происходит() только останавливает распространение на мероприятиях также содержится в реакции, и это происходит в jQuery() не останавливает распространение на мероприятия, связанные с реагировать.

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

5 ответов

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

работа JSFiddle с исправлениями снизу: http://jsfiddle.net/7LEDT/6/

реагировать остановить распространение на jQuery Event

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

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

jQuery остановить распространение на React Event

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

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

Источник

React: stopPropagation() does not seem to working?

I have a footer component with a function to toggle a modal component. In the modal component I have a wrapper for a background and the modal nested inside that wrapper. I have set the toggleModal function as a prop and adding it to the wrapper of the modal. I don’t want the modal itself to have this click function assigned to it so I used stopPropagation() in my function to stop the event bubbling although this does not seem to be working.

2 Answers 2

to stop the event bubbling although this does not seem to be working.

Did you mean the event bubbling does not work, or just the modal not working in general? I found two code problems, which when fixed seem to make the modal work. In addition, you may want the behaviour of e.preventDefault() , but I’m not sure from your question.

Problems & Fixes:

1. Missing props in method signature: const Modal = (props) =><
2. Not using show prop to show/hide modal div: props.show &&

stopPropagation & preventDefault

To see the behaviour differences of stopPropagation and preventDefault , try adding this radio beneath your button. You’ll need to refresh the page each time you need to reset the radio to experiment.

preventDefault stops the radio from being set, it prevents the default behaviour of the radio component from setting a value.

stopPropagation will not stop the radio from being set, because it only stops the event bubbling up to parent elements. It would be useful on a text to prevent events like the Enter key from affecting a parent

Источник