Почему при обработке событий JavaScript "return false" или "event.preventDefault ()" и "остановка потока событий" будут иметь значение? - PullRequest
Новая
       4

Почему при обработке событий JavaScript "return false" или "event.preventDefault ()" и "остановка потока событий" будут иметь значение?

13 голосов
/ 15 июня 2010

Говорят, что когда мы обрабатываем «событие щелчка», возвращая false или вызывая event.preventDefault () имеет значение, в котором

Разница в том, что предотвратите дефолт только предотвратит событие по умолчанию действие, то есть перенаправление страницы по ссылке нажмите, отправка формы, и т. д. и возврат false также остановит поток событий.

Означает ли это, если событие щелчка регистрируется несколько раз для нескольких действий, используя 

$('#clickme').click(function() { … })

возвращение false остановит запуск других обработчиков?

Я сейчас на Mac и могу использовать только Firefox и Chrome, но не IE, который имеет другую модель событий, и проверил его на FF и Chrome, добавив 3 обработчика, и все 3 обработчика работали без остановки…. так в чем же реальная разница, или есть ситуация, когда «остановка потока событий» нежелательна?

это связано с

Использование jQuery's animate (), если элемент, по которому щелкнули, имеет значение " ", the function should still return false?

and

В чем разница между e.preventDefault () и возвращением false?

Ответы [ 5 ]

13 голосов
/ 15 июня 2010

надеется, что этот код может объяснить вам ...

html 

<div>
<a href="index.html" class="a1">click me</a>
<a href="index.html" class="a2">click me</a>
</div>​

jquery 

$('div').click(function(){
    alert('I am from <div>');
});

$('a.a1').click(function(){
    alert('I am from <a>');
    return false; // this will produce one alert
});

$('a.a2').click(function(e){
    alert('I am from <a>');
    e.preventDefault(); // this will produce two alerts
});​

demo

или 

$('div').click(function(){
    alert('I am from <div>');
});

$('a').click(function(){
    alert('I am from <a>');
});

$('a.a1').click(function(){
    alert('I am from <a class="a1">');
    return false;
});

$('a.a2').click(function(e){
    alert('I am from <a class="a2">');
    e.preventDefault();
});​

демо 2

9 голосов
/ 15 июня 2010

Запись return false или e.preventDefault() не помешает запуску других обработчиков.

Скорее, они предотвратят реакцию браузера по умолчанию, такую ​​как переход по ссылке.

В jQuery вы можете написать e.stopImmediatePropagation(), чтобы запретить запуск других обработчиков.

2 голосов
/ 15 июня 2010

return false и preventDefault() предназначены для предотвращения действий браузера по умолчанию, связанных с событием (например, переход по ссылке при нажатии) Для достижения этой цели существует три метода:

1. Обработчик событий добавлен с использованием addEventListener() (браузеры не IE) . В этом случае используйте метод preventDefault() объекта Event. Другие обработчики для события будут по-прежнему вызываться. 

function handleEvent(evt) {
    evt.preventDefault();
}

2. Обработчик событий добавлен с использованием attachEvent() (IE) . В этом случае установите для свойства returnValue window.event значение true. Другие обработчики для события будут по-прежнему вызываться и могут также изменить это свойство. 

function handleEvent() {
    window.event.returnValue = false;
}

3. Обработчик событий добавлен с использованием атрибута или свойства обработчика событий . 

<input type="button" value="Do stuff!" onclick="return handleEvent(event)">

или 

button.onclick = handleEvent;

В этом случае return false выполнит эту работу. Любые другие обработчики событий, добавленные через addEventListener() или attachEvent(), будут по-прежнему вызываться. 

function handleEvent() {
    return false;
}
1 голос
/ 15 июня 2010

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

0 голосов
/ 15 июня 2010

Это не полностью отвечает на ваш вопрос, но на днях я использовал e.preventDefault() YUI для элемента <a>, чтобы подавить действие href, так как я только хотел, чтобы событие JavaScript onclick имело управление (если JS не обнаружен).В этой ситуации остановка всей цепочки событий не повлияла бы на меня.

Но за пару дней до этого у меня было <input type="checkbox">, вложенное в элемент <label>, и мне пришлось использовать условное выражение вобработчик события, чтобы определить, была ли выбранная цель меткой, поскольку ни e.preventDefault(), ни e.stopEvent() не остановили мое событие click из ( законно ) срабатывания дважды (кроме IE6).

Что было бы неплохо, так это возможность раздавить целую цепочку связанных событий, поскольку я уже пробовал распространение и return false ;, но я всегда собирался получить 2-е событие, благодаря моему элементу метки.

Редактировать: я не возражаю, зная, как jquery справился бы с моей ситуацией с двумя событиями, если бы кто-то хотел это прокомментировать.

...