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

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

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
});​

демонстрация

or

$('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

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

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

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

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)">

or

button.onclick = handleEvent;

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

function handleEvent() {
    return false;
}

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

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

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

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

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