Вопрос по jquery – обработчик кликов от поиска дополнительных элементов к

8

я будет сценарий пар здесь. пожалуйста, помогите мне

Вот базовый случай:http://jsfiddle.net/2zsLy/9/

Когда я нажимаюClick MeОкно оповещения иAnother Paragraph публично заявить. Это ожидается, поскольку событие click всплывает до родительского контейнера, которыйbody. Теперь начните мои вопросы

1)http://jsfiddle.net/2zsLy/10/

Как происходит добавлениеreturn false к моемуlive.click не останавливает всплывающее событие клика В этом примере всплывающее окно live.click и окно предупреждения. Я думал, что в документации сказано, что возвращение false остановит событие в реальном времени.

2)http://jsfiddle.net/2zsLy/11/

Теперь я меняю событие клика вbody вlive.click и это решает проблему -> событие щелчка не всплывает (следовательно, окно предупреждения не отображается). Почемуlive.click работа иclick не.

3)http://jsfiddle.net/2zsLy/13/

Я думаю, что в документации четко сказано, что звонитevent.stopPropagation() не остановит пузыриться, ну, я только что сделал. я используюevent.stopPropagation() ожидая, что это все еще вызовет мое окно предупреждения, но это не так. Почему?

НОТА: для ответа на первые два вопроса см.justkt ответы. Для ответа на последний вопрос см.Squeegy ответ иего ответ.

Ваш Ответ

2   ответа
2

звонкиclick(fn)). Так что возвращение false здесь ничего не делает, потому что$("body").click() уже случилось. Это из-за пузырей. Клик происходит на каждом родительском элементе, по которому вы щелкнули, вызывая каждое событие клика. Только когда он всплывает до корневого документа, он запускает любые живые события.

В этом примере у вас есть 2 живых события. Таким образом, событие всплывает в документе, и jQuery начинает запускать любые найденные события, которые соответствуют вашему клику. Когда он получаетreturn false он прекращает запуск любых других живых событий. И живые события объявлены первыми, запускаются первыми. Таким образом, вы получаете новый абзац, но ничего больше, так как предупреждение было добавлено в стек событий в реальном времени ПОСЛЕp живой клик.

Это не остановит распространение за события связывания, ноevent Аргумент на самом деле является объектом-оболочкой события jQuery, и я думаю, что он знает оlive, Таким образом, он имеет эффект, аналогичный возврату false, и не позволяет обработчику щелчка документа выполнять какие-либо дополнительные прямые события.

Остановлено боковое распространение, а не вертикальное.$('p').live('click', fn) связываетclick обработчик для документа. Множество живых событий от одного клика может произойти, потому что этот обработчик кликов проходит по всем зарегистрированным живым событиям и пытается сопоставить предоставленный вами селектор с элементом, который запустил событие. Если есть совпадение, он запускает вашу функцию.event.stopPropagation() говорит jQuery прервать этот цикл раньше. Таким образом, вы не останавливаете пузыри события, вы останавливаетеdocumentобработчик кликов от поиска дополнительных элементов кclick. Alex Wayne
Отличный ответ на1 а также2, Я не уверен, что понимаю ваш ответ3, Такevent.stopPropagation() не остановили размножение, что остановило размножение, Squeegy? Thang Pham
11

event.stopPropagation () Docs.

Что касается жизни («клик») против «клик» и пузырей:

Поскольку метод .live () обрабатывает события после их распространения в верхнюю часть документа, невозможно остановить распространение живых событий. Аналогично, события, обрабатываемые .delegate (), всегда будут распространяться на элемент, которому они делегированы; обработчики событий для любых элементов ниже этого будут уже выполнены к тому времени, когда делегированный обработчик события вызывается.

Так что вы видите ожидаемое поведение. live ('click') не прекратит пузыриться То же самое относится и к ныне предпочтительным.delegate ().

Этот ответ подробно описывает проблемы остановки распространения при использовании .live. Смотрите также.жить() справки о:

Событие всплывает, пока не достигнет корня дерева, где .live () по умолчанию связывает свои специальные обработчики.

Начиная с jQuery 1.4, всплывающее окно события может дополнительно останавливаться на элементе DOM «context».

Что касается остановки самого распространения:

Убей пузырьки по событию щелчка.

Так что stopPropagation ()должен предотвратить пузырениекуда бы ни вернули ложь; будемхотя и не там, где не будет. этоpreventDefault () это не предотвратит пузырение.return false; эффективно остановитьPropagation () и предотвращать дефолт ().

В ответ на каждый пример jsfiddle.

1)http://jsfiddle.net/2zsLy/10/

return false; не будет препятствовать событиям, связанным с использованиемlive или жеdelegate от пузырей. В документации явно говорится об этом, если все сделано сreturn false; или сstopPropagation(), Так что же происходит

Нажмите на<p>Нажмите пузыри, чтобы<body>, гдеbody.click() срабатываетНажмите пузыри, чтобы документ корень, где он соответствует$(event.target).closest('p'); и такlive('click') вызываетсяВозврат false происходит, но обработчик тела был вызван на шаге 2

2)http://jsfiddle.net/2zsLy/11/

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

Нажмите на<p>Нажмите пузыри, чтобы<body>, но так как обработчик тела подключен через live, он еще не вызываетсяНажмите пузыри, чтобы документ корень, где он соответствует$(event.target).closest('p'); и такlive('click') вызываетсяВозврат ложного происходитlive('click') не вызывается на теле из-за возврата ложного события.

3)http://jsfiddle.net/2zsLy/13/

stopPropagation() явно используется для предотвращения образования пузырьков, хотя имеет те же ограниченияreturn false; делает - так что это не помешает в случаеlive('click') событие, если есть обработчики кликов, связанные черезbind.

Большое спасибо. Ваш ответ на1 а также2 оказать мне большую помощь Однако для3, не сказать, что вы не правы, но вот цитата с сайта JQueryTo stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this. Сверху,Squeegy делает ответ и некоторые комментарии о3, согласны ли вы с его ответом3, просто? Thang Pham
@Harry - я полагаю, что цитируемый вами раздел относится к другим обработчикам того же объекта DOM (поэтому другой обработчик связан сp), который должен быть остановлен с помощьюreturn false или жеstopImmediatePropegation (который неявно вызываетstopPropegation).Смотрите этот отчет об ошибке когда это было сломано, почему я так думаю. Я думаю, что Squeegy прав. justkt
Я не думаю, что вы отвечаете на мой вопрос вообще. У вас просто приведена документация, просто ни одного, которую я не знаю. Для каждого сценария я включаю jsfiddle, чтобы продемонстрировать свой вопрос. Пожалуйста, обратитесь к ним. Thang Pham
@Harry - вы устанавливаете jQuery на 1.4.3. Установите его на 1.4.4 или позже и убедитесь, что ошибка была исправлена. Обратите внимание на один комментарий в отчете об ошибке:Unfortunately calling stopImmediatePropagation() doesn't work in 1.4.3 for live handlers, but this has already been fixed and will work once 1.4.4 comes out. Если вы продвинете версию, вы увидите, что это правда. justkt
@Harry - я отредактировал свой ответ для каждого примера jsfiddle. justkt

Похожие вопросы