Работа с событиями

Это основы-основ, не пропустите

Кликабельные элементы меню с обработчиками событий

#menu1
<a>

#menu2
<a>

#menu3
<a>

#menu4
<a>

#menu5
<a>

#menu6
<a>

Меню 1

//  - отработка клика по ссылке
//  - переход по ссылке
$("#menu1 li a")
  .click(function(event){
    alert("👋 Link 1 ...");
  });

Меню 2

//  - отработка клика по ссылке
//  - без перехода по ссылке
$("#menu2 li a")
  .click(function(event){
    alert("👋 Link 2 ...");
    event.preventDefault();
  });

Меню 3

//  - отработка клика по меню
$("#menu3")
  .click(function(event){
    alert("☝️ Menu 3 ...");
  });

//  - отработка клика по ссылке
//  - без перехода по ссылке
//  - событие всплывает до меню
$("#menu3 li a")
  .click(function(event){
    alert("👋 Link 3 ...");
    event.preventDefault();
  });

Меню 4

//  - отработка клика по меню
$("#menu4")
  .click(function(event){
    alert("☝️ Menu 4 ...");
  });

//  - отработка клика по ссылке
//  - без перехода по ссылке
//  - событие НЕ всплывает
$("#menu4 li a")
  .click(function(event){
    alert("👋 Link 4 ...");
    event.preventDefault();
    event.stopPropagation();
});

Меню 5

//  - отработка клика по меню
$("#menu5")
  .click(function(event){
    alert("☝️ Menu 5 ...");
  });

//  - отработка клика по ссылке
//  - без перехода по ссылке
//  - событие НЕ всплывает
$("#menu5 li a")
  .click(function(event){
    alert("👋 Link 5 ...");
    return false;
  });

//  - +1 отработка клика по ссылке
//  - без перехода по ссылке
//  - событие НЕ всплывает
$("#menu5 li a")
  .click(function(event){
    alert("👋 Link 5, again ...");
    return false;
  });

Меню 6

//  - отработка клика по меню
$("#menu6")
  .click(function(event){
    alert("☝️ Menu 6 ...");
  });

$("#menu6 li a")
.click(function(event){
  alert("👋 Link 6 ...");
  event.stopImmediatePropagation();
  return false;
});

$("#menu6 li a")
.click(function(event){
  alert("👋 Link 6, never ...");
  return false;
});