JavaScript підручник | Скасування дій браузера за замовчуванням

Скасування дій браузера за замовчуванням
Скасування дії браузера
Приклад: меню
Інші дії браузера
Разом
Галерея зображень

Скасування дій браузера за замовчуванням

Доброго дня! У цьому уроці я хотів би розглянути таке питання, як скасування дій браузера за замовчуванням. Справа в тому, що є деякі події в браузері за якими вже закріплені стандартні обробники і ось вони можуть спрацьовувати разом з вашими обработчиками, а як зробити так, щоб ці обробники за замовчуванням не спрацьовували. Ось про це і читайте далі.

Перерахую основні події браузера за замовчуванням:

Клік по посиланню - ви переходите на нову сторінку, адреса якої вказана в атрибуті href.
Натискання на кнопку «відправити» в формі - відсилає дані форми на сервер.
Подвійний клік на тексті - при цьому текст буде виділений.

Так ось, коли ви обробляє якесь із цих подій, то найчастіше вам не потрібно спрацьовування оброблювачів, закріплених за цими подіями. Давайте розглянемо як їх скасувати можна.

Скасування дії браузера

Існує 2 способи для скасування подій браузера за замовчуванням:

Головний спосіб - це скористатися об'єктом події, який передається в функцію обробник події (я писав орб цьому тут ). Для скасування дії браузера використовується метод event.preventDefault ().
У разі призначення обробника через onсобитіе (а не через addEventListener), то повернути false з функції обробника.

У прикладі при кліці по посиланню перехід не відбудеться:

<a href="/" onclick="return false"> Натисни тут </a> або <a href="/" onclick="event.preventDefault()"> тут </a>

Зазвичай значення, яке поверне обробник події, як правило ігнорується.

Єдиний виняток - це return false з обробника, призначеного через onсобитіе, але це вже як правило не використовується.

Приклад: меню

Розглянемо приклад, коли потрібно створити меню, наприклад таке:

<Ul id = "menu" class = "menu"> <li> <a href="/php"> PHP </a> </ li> <li> <a href="/html"> HTML </ a > </ li> <li> <a href="/javascript"> JavaScript </a> </ li> <li> <a href="/flash"> Flash </a> </ li> </ ul >

HTML-розмітка зверстана так, що всі елементи меню не є кнопками, а посиланнями, тобто тегами <a>.

Це тому, що деякі відвідувачі дуже люблять поєднання «правий клік - відкрити в новому вікні». Так, можна використовувати і <button> і <span>, але тоді правий клік не працюватиме і цей факт їх засмучує.

Тому в розмітці ми використовуємо саме <a>, але подія клік буде оброблятися повністю в JavaScript, а стандартне дію браузера (перехід по посиланню) - треба буде скасувати.

Наприклад, як варіант:

menu.onclick = function (event) {if (event.target.nodeName! = 'A') return; event.preventDefault (); var href = event.target.getAttribute ( 'href'); alert (href); // може бути подгрузка з сервера return false; // скасувати перехід по url};

В кінці return false, інакше браузер перейде за адресою вказаною в атрибуті href.
Так як ми застосували делегування , То меню можна додати вкладені списки ul / li і стилізувати їх за допомогою CSS - а сам обробник не зажадає ніяких змін.

Інші дії браузера

Дій браузера за замовчуванням досить багато.

Перерахую деякі події, які викликають дії браузера за замовчуванням:

mousedown - натискання кнопкою миші в той же час коли курсор знаходиться на тексті почне його виділення.
click на <input type = "checkbox"> - поставить або прибере галочку.
submit - при натисканні на кнопку <input type = "submit"> в формі дані відправляться на сервер.
wheel - рух коліщатка миші ініціює подія scroll або прокрутку сторінки.
keydown - при натисканні клавіші клавіатури в поле вводу з'явиться символ.
contextmenu - при правому кліку миші показується контекстне меню браузера.

Всі ці дії вам доведеться про скасувати, якщо ви хочете обробити подія за допомогою JavaScript.

Події також можуть бути пов'язані між собою

Деякі події можуть природним чином випливати одне з одного.

Наприклад, натискання мишкою mousedown на поле введення <input> призводить до фокусуванні всередині нього. Якщо скасувати дію mousedown, то і фокуса не буде.

Разом

Браузер має вбудовані дії при ряді подій - перехід по посиланню, відправка форми та інші. Їх можна скасувати.
Є 2 способи скасувати дію за замовчуванням: перший - використовувати метод event.preventDefault () (для IE8-: event.returnValue = false), а другий - return false з обробника події. 2-й спосіб буде працювати, тільки якщо обробник призначений через onсобитіе.

завдання

Чому тут не працює return false?

Чому в цьому документі return false не працює?

<Script> function handler () {alert ( "..."); return false; } </ Script> <a href="http://google.com" onclick="handler()"> w3.org </a>

За задумом, перехід на google.com при кліці повинен скасовуватися. Однак, насправді він відбувається.

В чому справа і як поправити?

Галерея зображень

Створіть галерею зображень, в якій основне зображення змінюється при кліці на зменшений варіант.

Для обробки подій використовуйте делегування, тобто не більше одного обробника.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

також читайте

Чому в цьому документі return false не працює?
В чому справа і як поправити?

Статьи