Как отменить переход по ссылке или куда вставить return

Один из вопросов который возникает у новичка это:

• "Как при клике на ссылку, отменить переход по ней и выполнить функцию"
• "Как при клике на ссылку выполнить функции и после нее перейти по адресу ссылки"
• ну и другие такие же вопросы :)

И так начнем с первого вопроса:

1) Как при клике на ссылку, отменить переход по ней и выполнить функцию

У нас есть такая функция:

fucntion click() {
   alert('click');
}

Функция просто выводит alert-сообщение с текстом - "click".

И есть ссылка при клике на которую вызывается данная функция:

<a href="http://google.com/" onclick="click();">Click me</a>

И так, для того что бы не было перехода по ссылке, достаточно добавить после имени функции команду - return false;


Должно получится так:

<a href="http://google.com/" onclick="click(); return false;">Click me</a>

Вот пример:
Click me

Дело в том что команда return false; указывает браузеру прекратить выполнение скрипта (в данном случае не переходить по адресу ссылки).  К примеру если мы вернем значение true то переход будет осуществлен.

2) Как при клике на ссылку выполнить функции и после нее перейти по адресу ссылки
Тут есть два варианта, в зависимости от ситуации нужно выбрать тот который подойдет, а именно:

• Продолжить переход по ссылке
• Программно сделать пере адресацию

2.1) Продолжить переход по ссылке

И так, для того что бы выполнить переход по ссылке после выполнения функции, мы должны написать так:

<a href="http://google.com/" onclick="return click();">Click me</a>

То есть, браузеру вернется то что вернет функция, а уже в конце функции мы указываем return true; Получается что браузер будет ждать окончания выполнении функции что бы получить ответ и знать что делать дальше.

Вот как может выглядеть такая функция:

function click() {
   //Тут строчки кода фукнции
   //Тут еще
   //и тут тоже
   return true;
}

После выполнения этой функции, будет выполнен переход по ссылке.

А вот так перехода по ссылке не будет:

function click() {
   //Тут строчки кода фукнции
   //Тут еще
   //и тут тоже
   return false;
}

Так как мы возвращаем ложь (false) что говорит браузеру прервать выполнение.

2.2) Программно сделать пере адресацию
Но иногда бывают ситуации когда необходимо дождаться не окончания выполнения нашей функции, а какой нибудь другой функции.

Вот к примеру такая ситуация:
Мы при клике на ссылку, хотим сделать анимацию (что бы ссылка переместилась) и после этого только сделать пере адресацию:

function click(obj) {
   $(obj).animate({
      marginLeft: '100px'
   }, 2000);
   return true;
}

И ссылка:

<a href="http://google.com/" onclick="return click(this);">Click me</a>

В данном случае функция обратится к animate и не дождавшись окончания вернет значение true
Но нам нужно подождать 2 секунды пока выполнится анимация.
В данном случае мы возвращаем false, а в качестве callback-функции у анимации сделаем пере адресацию сами.

Вот так все должно выглядеть:

function click(obj) {
   var link = obj; // В переменную link сохраняем объект ссылки, так как потом нам нужно узнать ее адрес
   $(obj).animate({
      marginLeft: '100px'
   }, 2000, null, function() {
      location.href = link.href; // тут мы выполняем пере адресацию
   });
   return false; // Указываем браузеру остановить пере адресацию
}

Вот пример кода выше:
Click me

Заключение
Ну вот как то так :)  Если что то не понятно, или хотите подправить меня, пишите в комментариях, и по вашим комментариям буду обновлять статью :)