event.preventDefault () и несколько событий - PullRequest
6 голосов
/ 11 апреля 2011

Прежде чем приступить к написанию огромного количества неработающего кода, я подумал, что задам этот вопрос.

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

Теоретически я должен иметь возможность привязывать обработчики событий нескольких кликов в jQuery к определенной цели для выполнения различных действий, таких как публикации Ajax и отслеживание Google.

Я не прав?

1 Ответ

25 голосов
/ 11 апреля 2011

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&amp;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;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...