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

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

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

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

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

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

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

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

Источник

Javascript event.stopPropagation () не работает с атрибутом `accesskey`

Простая HTML-страница содержит только два элемента управления, одно текстовое поле и одну кнопку. После загрузки страницы, если пользователь щелкает внутри текстового поля и нажимает «alt» + p (кнопка доступа), сообщение должно отображаться как «Я нажму . » но если пользователь щелкает в любом месте, кроме внутри текстового поля, сообщение должно отображаться как «Я должен вызываться, только когда фокус находится за пределами текстового поля . ». Полный код показан ниже:

Он отлично работает в IE10 и ниже. Но он не работает в IE11 и Chrome, вместо этого он показывает два предупреждающих сообщения одно за другим, типа «Я нажал на ключ . » и «Меня должны вызывать только тогда, когда фокус находится за пределами текстового поля . » что не желательно. Поэтому обработчик событий keyDown() изменен для поддержки IE10 + и Chrome

Но в этом сценарии event.stopPropagation () не работает, есть идеи почему?

5 ответов

Это просто обходной путь, не может быть правильным решением — проблема связана с атрибутом accesskey , поэтому этот атрибут необходимо временно удалить и добавить еще раз, как объяснил @gfullam. Это можно сделать эффективно с помощью jquery, но неизвестно, почему stopPropagation () не работает.

Вы не передали объект события.

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

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

Вот еще один обходной путь, просто отключите только включенный элемент accesskey и включите его после этого.

Кажется, проблема в атрибуте accesskey . Chrome и IE используют ALT + accesskey для активации нажатия клавиши. https://developer.mozilla.org/en-US/docs / Web / HTML / Global_attributes / Accesskey. Удалите это, и проблема исчезнет.

Событие accesskey всегда срабатывает

(если вы временно не отключите его)

Большинство браузеров всегда инициируют события, связанные с атрибутами accesskey , даже если другие обработчики связанных событий используют общие тактики, такие как return false , stopPropagation , stopImmediatePropagation , preventDefault , cancelBubble и т. Д., Которые в других случаях эффективны при остановке всплытия событий и поведения по умолчанию при обычных обстоятельствах.

Но в вашем случае у вас есть обработчик, проверяющий ту же комбинацию клавиш, которую вы связали через accesskey с другим элементом. Таким образом, каждый раз, когда эта ключевая комбинация вводится, когда текстовое поле имеет фокус, оба обработчика срабатывают: сначала в обработчике keyDown , затем независимо от какой-либо попытки остановить всплывающее событие этого события, обработчик clickMe вызван, потому что он активирован accesskey .

Одним из решений является временное удаление атрибутов accesskey , когда вы не хотите их слушать (например, когда ваш текстовый ввод имеет фокус), а затем восстановление их, когда вы больше не хотите их игнорировать (например, когда ваш ввод текста теряет фокус).

Посмотрите этот ответ для решения на основе jQuery, которое вы можете использовать в качестве трамплина для создания простого решения JS в соответствии с вашими потребностями.

Источник

event.stopPropagation не работает в Firefox

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

Я использую Javascript и CSS, так что когда пользователь щелкает элемент меню верхнего уровня, его элементы подменю будут переключать их видимость, т. Е. Нажимать на основной элемент, и будут отображаться его подэлементы. Снова щелкните по основному элементу, и вложенные элементы исчезнут.

Чтобы избежать переключения подменю, когда пользователь щелкает элемент подменю, я использовал метод event.stopPropagation ().

Желаемый результат работает в Chrome, Safari и Dolphin, но не работает ни в Firefox 26.0, ни в Android Firefox 26.0.1.

Если вы запустите этот пример (JSBin), вы заметите, что можете нажать Menu 2 и / или Menu 3 и появится подменю. Эта часть хороша во всех браузерах.

Тем не менее, если вы щелкнете по элементу подменю (т.е. меню 3.1) в Firefox, подменю исчезнет, а это не тот эффект, который мне нужен. Если вы щелкнете по элементу подменю в Chrome / Safari, подменю останется видимым, и это то, чего я хочу.

Я прочитал Mozilla Developer Network, что event.stopPropagation () поддерживается в Chrome , Firefox (Gecko) , IE9 , Opera и Safari (WebKit) . Итак, я не понимаю, почему метод stopProp не работает в моем случае.

Можете ли вы взглянуть на мой пример JS и сказать мне, что случилось?

P.S . Среда, в которой я работаю, не позволит мне использовать jQuery.

Источник

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 не работает в Firefox

Я создаю вертикальное меню боковой панели, которое содержит элементы главного меню и один уровень элементов подменю.

Я использую Javascript и CSS, так что, когда пользователь нажимает элемент меню верхнего уровня, его элементы подменю будут переключаться на их видимость, т.е. Щелкните на основном элементе и появятся его подпункты. Нажмите главный элемент снова, и подпункты исчезнут.

Чтобы избежать переключения подменю, когда пользователь щелкает элемент подменю, я использовал метод event.stopPropagation().

Желаемый результат работает в Chrome, Safari и Dolphin, но не работает в Firefox 26.0 или Android Firefox 26.0.1.

Если вы запустите этот пример (JSBin), вы заметите, что вы можете нажать » Menu 2 и/или » Menu 3 и появится подменю. Эта часть хорошо во всех браузерах.

Однако, если вы щелкнете элемент подменю (т.е. меню 3.1) в Firefox, подменю исчезнет — это не тот желаемый эффект, который я хочу. Если вы щелкнете элемент подменю в Chrome/Safari, подменю останется видимым — что и я хочу.

Я прочитал в Mozilla Developer Network, что event.stopPropagation() поддерживается в Chrome , Firefox (Gecko) , IE9 , Opera и Safari (WebKit) . Итак, я смущен тем, почему метод stopProp не работает в моем случае.

Можете ли вы взглянуть на мой пример JS и рассказать мне, что?

Здесь Javascript, который я запускаю (также в JSBIN):

PS Окружающая среда, которую я разрабатываю, не позволит мне использовать jQuery.

Источник