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

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

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

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

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

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

1. Первый способ — это воспользоваться объектом события. Для отмены действия браузера существует стандартный метод 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)
   ...
   

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

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

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

В следующем примере при клике по ссылке переход не произойдет, потому что действие браузера отключено:

<a href="/" onclick="return false">Нажми меня</a>

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

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

Например, при клике по ссылке происходит фокусировка. Большинство браузеров выделяют такую ссылку пунктирной границей. Можно и указать свой стиль в 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 {                // старый IE
    e.returnValue = false;
    e.cancelBubble = true;
  }
}

Итого

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