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

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

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

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

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

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

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

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

Источник

JQuery StopPropagation не работает в firefox

У меня этот код работает в Safari и Chrome, но не в Firefox. У firefox есть проблема со StopPropagation ()?

4 ответа

Я не знаю, как выглядит ваш HTML, но stopPropagation отлично работает в FireFox.

Я думаю, что ваши ожидания могут быть неверными в том, что он делает.

event.stopPropagation ()
Предотвращает всплытие события в DOM tree, не позволяя родительским обработчикам получать уведомления о событии.

Предположим, например, такой HTML:

Этот код работает нормально, событие click не всплывает:

DEMO — работает в FF — не всплывает событие

Закомментируйте строку e.stopPropagation(); в ДЕМО, и, как и ожидалось, событие всплывает вверх, показывая предупреждение от родителя.

Каково ваше ожидаемое поведение?

Вы не указали, что именно должно произойти.

Если, например, вы ожидали, что сработает действие по умолчанию для события no, вы можете использовать preventDefault ()

event.preventDefault ()
Если этот метод вызывается, действие события по умолчанию не запускается.

Если вы хотите охватить оба, предотвратить действие по умолчанию и предотвратить всплытие события, вы либо вызываете оба, либо просто используете return false в конце вашего метода.

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

stopPropagation используется для остановки события от срабатывания родительских элементов.

См. http://jsfiddle.net/Accus/2/, чтобы узнать, как это работает.

Это сработало для меня (во всех браузерах, независимо от того, может ли событие быть передано), я использую маркеры карты Google и не смог передать событие методу:

Я столкнулся с той же проблемой и исправил ее, как только понял, что сделал пару «ошибок отвлечения внимания», которые могут быть полезны для некоторых:

1) Помните аргумент «событие» : Функция, которая запускается при срабатывании события (т.е. функция, переданная в качестве аргумента в $ (‘. Login-menu form’). Click ()), должна принимать аргумент, который представляет событие (по соглашению называется ‘event’ или ‘e’ в большинстве руководств). Chrome позволяет забыть об этом, в то время как Firefox этого требует.

2) Не забудьте очистить кеш Firefox (CTRL + F5): Если, как и я, вы отключите кеш Chrome для разработки (инструменты -> Консоль Javascript -> параметры -> Отключить кеш (пока DevTools открыт)), но не сделаете то же самое в Firefox (потому что это немного сложнее сделать, а я ленив), не забудьте перезагрузить страницу с помощью CTRL + F5

Источник

Событие в JQuery — event.stopPropagation не работает

Я пытаюсь предотвратить появление формы клика в родительском HTML-теге . Вот мой код:

Независимо от добавления event.stopPropogation(); событие нажатия на все еще срабатывает.

3 ответа

Существует разница между предотвращением появления пузырей и отменой поведения браузера по умолчанию. Попробуйте добавить

В конце вашей функции обработчика, как это

Это должно быть решением, если я правильно понял вопрос.

Извините, я должен был упомянуть, что есть также альтернатива для этого (который я должен был дать в первую очередь в качестве совета), и это:

Эта функция фактически предотвращает поведение по умолчанию, тогда как

Делает оба (прекращает пузыриться и предотвращает поведение по умолчанию)

Вы можете попробовать это

Не зная вашей полной структуры DOM, это будет немного абстрактно. Однако обработчики событий, связанные с элементом перед его добавлением в DOM, на самом деле не срабатывают.

Обработчики событий связаны только с выбранными в данный момент элементами; Они должен существовать на странице в тот момент, когда ваш код вызывает .on () .
Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри обработчика готовых документов для элементов, которые находятся в HTML-разметка на странице. Если новый HTML-код внедряется в страницу . прикрепите обработчики событий после того, как новый HTML-код помещен на страницу. Или используйте делегированные события .

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

Конечно, вы всегда можете сохранить свою логику как есть, но привязать обработчик к элементу только после его добавления в DOM. Это разумно, если вы не будете динамически создавать этот элемент более одного раза после начальной загрузки страницы.

Источник

jQuery / JavaScript Bubbling и stopPropagation не работают

Я делаю кнопку редактирования, которая открывает модальное поле с формой для редактирования. Затем jQuery отправляет эту форму на мой сервер, и я получаю ответ JSON. Однако, из-за моей проблемы с пузырями, если я, например, нажимаю на все кнопки редактирования, а затем нажимаю на последнюю и меняю поле, он делает это для всех из них.

А затем отправить событие:

Наконец, все это внутри getScript:

Я использовал это только один раз, и это сработало, но я также должен был сделать this.event.stopPropagation, но если я делаю «это», то теперь это говорит, что this.event не определено, но, как я сказал, этот точный код раньше работал над другим сценарием

У кого-нибудь есть какие-либо идеи? : \

3 ответа

Событие может иметь несколько слушателей событий. Каждый раз, когда вы используете $ (element) .submit (whatFunction), вы добавляете другую функцию whatFunction в событие submit. Если вы хотите, чтобы только последний прослушиватель выполнял действие, вызванное событием, попробуйте сделать это:

Я думаю, вы event.stoppropagation уже делают свою работу. Он остановил все всплывающие сообщения о событии нажатия кнопки (т. Е. Если вы попытаетесь проверить тело документа, у него больше не будет события щелчка мышью). Причина, по которой коды при отправке формы все еще выполняются, заключается в том, что это вызывается действием кнопки по умолчанию.

Вместе с event.stoppropagation () я предлагаю вам включить это:

Так что действие по умолчанию не будет использоваться, и будут выполняться только коды в вашем обработчике.

Это в функции, которая создает кнопки редактирования?

Если это так, то он будет добавлять этот обработчик несколько раз к одним и тем же элементам, вызывая поток предупреждений. Используйте live , который поместит обработчик на каждый соответствующий элемент, даже Если это добавляется позже в исполнении.

Источник

JQuery/JavaScript Bubbling и stopPropagation не работают

Я делаю кнопку редактирования, которая выдает модальный блок с формой для его редактирования. Затем jQuery отправляет эту форму на мой сервер, и я получаю ответ JSON. Однако из-за моей проблемы с пузырями, если я нажимаю, например, все кнопки редактирования, а затем нажимаю на последнюю и меняю поле, он делает это через все из них.

а затем событие отправки:

Наконец, все это внутри getScript:

Я использовал это только один раз, и это сработало, но я также должен был сделать this.event.stopPropagation, но если я сделаю «this», теперь он говорит this.event undefined, но, как я сказал, этот точный код работал раньше для другого script, я сделал.

Есть ли у кого-нибудь идеи?:\

Событие может иметь несколько прослушивателей событий. Каждый раз, когда вы используете $(element).submit(whateverFunction), вы добавляете еще одну anyFunction в событие submit. Если вы хотите, чтобы только последним слушателем являлось действие, предпринятое при включении события, попробуйте сделать следующее:

Я думаю, что event.stoppropagation уже делает свою работу. Он остановил все пузырьки в событии нажатия кнопки (т.е. Если вы попытаетесь проверить тело документа, у него больше не будет события щелчка мыши). Причина, по которой коды в рамках представления формы все еще выполняются, заключается в том, что это вызвано действием кнопки по умолчанию.

Вместе с event.stoppropagation(), я предлагаю вам включить это:

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

Источник