Действия браузера по умолчанию

Источник: http://learn.javascript.ru/default-browser-action

Многие события влекут за собой действие браузера.

Например, клик по ссылке инициирует переход на новый URL, нажатие на кнопку «отправить» в форме – посылку ее на сервер, и т.п.

Если логика работы обработчика требует отменить действие браузера – это возможно.

Отмена действия браузера

Есть два основных способа.

Первый способ – это воспользоваться объектом события. Для отмены действия браузера существует стандартный метод event.preventDefault(), ну а для IE<9 нужно назначить свойство event.returnValue = false.

Кроссбраузерный код:

element.onclick = function(event) {
  event = event || window.event

  if (event.preventDefault) {  // если метод существует
    event.preventDefault();
  } else { // вариант IE<9:
    event.returnValue = false;
  }
}

Можно записать в одну строку:

...
event.preventDefault ? event.preventDefault() : (event.returnValue=false);
...

Если обработчик назначен через on..., то return false из обработчика отменяет действие браузера:

element.onclick = function(event) {
  ...
  return false;
}

Такой способ проще, но не будет работать, если обработчик назначен через addEventListener/attachEvent.

При возврате return false из обработчика, назначенного через onсобытие, действие браузера будет отменено.

Иногда в коде начинающих разработчиков можно увидеть return других значений. Они никак не обрабатываются. Можно возвратить всё, что угодно: строку, число, null, undefined – всё, кроме false, игнорируется.

Действия, которые нельзя отменить

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

Например, при клике по ссылке происходит фокусировка. Большинство браузеров выделяют такую ссылку пунктирной границей. Можно и указать свой стиль в CSS для псевдоселектора :focus.

Фокусировку нельзя предотвратить из обработчика onfocus, поскольку обработчик вызывается уже после того, как она произошла.

С другой стороны, переход по URL происходит после клика по ссылке, поэтому его можно отменить.

<style>
a:focus { border: 1px solid black }
</style>

<a href="/" onclick="return false" onfocus="return false">
  По клику произойдет фокусировка, но перехода не будет
</a>

Действие браузера по умолчанию и всплытие взаимно независимы.

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

Если хотите отменить и то и другое:

function stop(e) {
  if (e.preventDefault) { // стандарт
    e.preventDefault();
    e.stopPropagation();
  } else {                       // IE8-
    e.returnValue = false;
    e.cancelBubble = true;
  }
}

Итого

• Браузер имеет встроенные действия при ряде событий – переход по ссылке, отправка формы и т.п. Как правило, их можно отменить.
• Есть два способа отменить действие по умолчанию: первый – использовать event.preventDefault() (IE<9: event.returnValue=false), второй – return false из обработчика. Второй способ работает только если обработчик назначен через onсобытие.
• Действие браузера само по себе, всплытие события – само по себе. Они никак не связаны.