event.preventDefault()
только отменяет действие по умолчанию для события click, не так ли?
Отменяет действие браузера по умолчанию для события (не только для события click
) ( W3C docs , jQuery docs ). Так, например, в форме submit
событие предотвращает отправку формы браузером. Это не останавливает все, что вы делаете в коде, и не прекращает пузыриться; это то, для чего stopPropagation
( W3C документы , jQuery документы ).
Допустим, у вас есть ссылка в div
, и у вас есть событие click
, подключенное и к ссылке, и к div
. Если обработчик события ссылки вызывает preventDefault
, браузер не будет выполнять действие по умолчанию (по ссылке), но событие продолжает всплывать в DOM к родительскому элементу ссылки, div
, и поэтому посмотрите на событие вашего обработчика click
там же. Любые действия, которые вы выполняете в коде любого из обработчиков, не будут затронуты вашим вызовом preventDefault
.
В своем комментарии ниже вы спрашиваете о нескольких обработчиках для одного и того же элемента. Ни preventDefault
, ни stopPropagation
не влияют на них, они все равно будут уволены ... если вы не используете stopImmediatePropagation
, который сообщает jQuery, чтобы остановить событие в его треках (но не мешает действие браузера по умолчанию).
Я, вероятно, должен завершить это, сказав, что если вы вернете false
из вашего обработчика событий, это скажет jQuery, чтобы по умолчанию и прекратили пузыри. Это как звонить preventDefault
и stopPropagation
. Это удобная форма быстрого вызова, когда ваш обработчик событий получает полный контроль над событием.
Итак, учитывая этот HTML:
<div id='foo'><a href='http://stackoverflow.com'>Q&A</a></div>
Пример 1:
// Here we're preventing the default but not stopping bubbling,
// and so the browser won't follow the link, but the div will
// see the event and the alert will fire.
$("#foo").click(function() {
alert("foo clicked");
});
$("#foo a").click(function(event) {
event.preventDefault();
});
Пример 2:
// Here we're stopping propagation and not preventing the default;
// the browser will follow the link and the div will not be given
// a chance to process the event (no alert, and more to the point,
// code in the div's handler can't prevent the default)
$("#foo").click(function() {
alert("foo clicked");
});
$("#foo a").click(function(event) {
event.stopPropagation();
});
Пример 3 (вы увидите это редко):
// Here we're doing both, and so the browser doesn't follow the
// link and the div doesn't see the event (no alert).
$("#foo").click(function() {
alert("foo clicked");
});
$("#foo a").click(function(event) {
event.preventDefault();
event.stopPropagation();
});
Пример 4:
// Shorter version of Example 3, exactly the same effect
$("#foo").click(function() {
alert("foo clicked");
});
$("#foo a").click(function() {
return false;
});