Различия в распространении событий DOM / jQuery между типами ввода

Question

Как мы знаем, возврат false из обработчика событий DOM остановит распространение события. Но недавно я обнаружил, что поведение различных элементов варьируется в зависимости от этого события. Например, рассмотрим следующее:

<div id="container">
   <input type="checkbox" name="foo" value="1" /> Check me!
   <br />
   <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
   </select>
   <br />
   <input type="text" size="30" />
</div>

В окружающем контейнере есть обработчик кликов, который возвращает false:

$('#container').click(function(e) {
    $('#clicks').append('<span>clicked</span>');
    return false;
});​

В div я все еще могу щелкнуть текстовое поле и ввести текст, а также щелкнуть раскрывающийся список, чтобы изменить его значение. Но нажатие на флажок ничего не делает (на самом деле, это не совсем так - он проверяет флажок, запускает обработчик, а затем снимает его). jsfiddle здесь: http://jsfiddle.net/4ncaq/

Это поведение одинаково для всех браузеров, поэтому я предполагаю, что оно разработано. Но какое именно правило действует здесь? Как я могу узнать, как другие типы элементов могут вести себя в сценарии такого типа?

Answer 1

То, что вы видите, - это распространение, события «всплывают» в DOM, поэтому, когда вы нажимаете флажок, он фактически запускает событие click на #container (а также любые события, которые вы могли связать с входом или другим родителем). элементы).

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

Лучше быть точным и использовать методы из объекта события, чтобы предотвратить действие по умолчанию или прекратить пузыри.

event.preventDefault () остановит такие вещи, как загрузка href от щелчка якоря, остановка проверки флажка и т. Д.

event.stopPropagation () отменит распространение, это полезно для ситуаций, подобных вашему примеру - http://jsfiddle.net/4ncaq/1/

Другая проблема, связанная с возвратом false, заключается в том, что он может быть не выполнен. Распространенная ошибка, которую, как я вижу, люди делают в jQuery, - это событие click на привязке с запросом $ .ajax (), за которым следует return false, чтобы остановить браузер. от загрузки связанной страницы. В этом случае, если есть ошибка, исходящая от ajax () (не ошибка ответа, ошибка jQuery - обычно параметр с ошибкой или что-то в этом роде), он никогда не нажмет return false; и браузер загрузит связанную страницу. Использование e.preventDefault () полностью устраняет эту проблему.

Answer 2

Когда вы щелкаете элемент, событие будет продолжать распространяться, пока какой-либо обработчик не решит отменить распространение. В этом случае, когда вы устанавливаете флажок, он сначала вызывает событие для <input>, а затем распространяется на #container, где вы останавливаете распространение.

Если вы хотите отменить распространение из элементов ввода, таких как флажки или текстовые области, вам следует привязать их к событию click и остановить распространение в этой точке.

Отредактированный

return false также отменяет действие по умолчанию для исходного целевого элемента. Флажки, ссылки, переключатели - это некоторые элементы, в которых действие по умолчанию отменяется. Действие по умолчанию для события click в флажке переключает значение флажка, в то время как для выбора нет действия щелчка по умолчанию, что означает, что оно не отменяется.

Я попытался найти список действий по умолчанию без удачи, но вы можете проверить ссылки на Существует ли стандартный ресурс для "действия по умолчанию" элементов HTML? .