Що таке javascript: void(0) ?
І як правильно виправити цю помилку на сайті
Якщо ви працюєте з веброзробкою, є висока імовірність того, що ви стикалися з виразом javascript:void(0);. Часто його використовують під час роботи з посиланнями та подіями на сторінці. Але що ж він означає і для чого його застосовують? Нумо розбиратися.
Що таке javascript:void(0);?
javascript:void(0); — це вираз на JavaScript, який використовують як значення атрибута href посилання (виділяють у розмітці <a></a>).
Ось як це працює:
1. Ключове слово javascript: означає для браузера, що тут зазначений код на JavaScript.
2. Оператор void приймає аргумент і повертає undefined, незалежно від того, що передається як аргумент. У нашому випадку аргументом є 0, але за передачі будь-якого іншого значення результат буде тим самим.
3. Таким чином, результатом виконання javascript:void(0) є відсутність значення, яке повертається. Для браузера це сприймається як заборона виконувати дії, що передбачені за замовчуванням.
Для чого ж використовують javascript:void(0);?
Основне призначення цієї конструкції — зупинити стандартні операції в браузері. Як ми вже згадували раніше, найчастіше її можна побачити в посиланнях (<a></a>). Уявімо, що розробник не хоче, щоб відбувалося перенаправлення на якусь іншу сторінку або ж стандартне оновлення сторінки. Тоді розробник зазначить це таким чином:
<a href="javascript:void(0);" onclick="myFunction()">Тисни тут</a>
У прикладі вище за натискання на посилання браузер не оновить сторінку і не виконуватиме будь-які інші стандартні та непотрібні дії. Натомість викликається функція myFunction(), яка і призначена виконати запланований функціонал. Оператор void(0) гарантує, що ніякі інші дії не здійсняться після того, як користувач клікне на посилання.
Чи можна замінити javascript:void(0);?
Відповідь — так, навіть потрібно. Тож розглянемо, як ми можемо замінити цей вираз, а потім з’ясуємо, чому це варто зробити.
Маємо 2 основних варіанти заміни цього виразу:
1. return false
Цей варіант полягає у використанні саме подій і функцій. Можна обробляти подію кліку на посилання без маніпуляцій атрибутом href. Для прикладу:
<a href="#" onclick="myFunction(); return false;">Тисни тут</a>
У цьому випадку атрибут href="#" мав би викликати оновлення сторінки, але оператор return false; у функції onclick зупиняє стандартну поведінку.
Проте важливо пам’ятати, що застосування # все ж таки може викликати оновлення сторінки або скролінг до верхньої частини сторінки, що може бути також небажаним. Перевіряйте, як ваші інструменти працюватимуть за використання таких конструкцій, однак такий варіант є і його варто розглядати.
2. preventDefault()
Сучасний та оптимальний спосіб запобігання стандартній поведінці подій — це використання методу event.preventDefault() у JavaScript.
<a href="#" id="myLink">Тисни тут</a>
<script>
document.getElementById("myLink").addEventListener("click", function(event){
event.preventDefault();
myFunction();
});
</script>
Цей підхід дає змогу скасувати дію за замовчуванням, яку виконує браузер.
Саме такий спосіб вказано в специфікації DOM 2 Event.
Чому не варто використовувати javascript:void(0);?
1. Погана читабельність: застосування такої конструкції може знижувати сприйняття коду. Це має не такий інтуїтивний вигляд, як, наприклад, використання подій JavaScript через addEventListener.
2. Застарілі підходи: хоча це доволі поширений підхід, його часто вважають застарілим у сучасній веброзробці.
3. Проблеми із SEO: в контексті пошукових систем та інструментів javascript:void(0) може впливати на оптимізацію, оскільки такі посилання не мають реального призначення і їх можуть розцінити як погано структурований код.
Отже, конструкцію javascript:void(0); використовують для скасування стандартних операцій браузера. Однак у сучасній веброзробці існують елегантніші й сучасніші підходи для розв’язання цієї проблеми, як-от методи обробки подій через JavaScript (наприклад, event.preventDefault()).
На практиці ж javascript:void(0) досі застосовують у багатьох давніх або простих проєктах, але нові стандарти програмування рекомендують переходити на зрозуміліші та сучасніші методи роботи з подіями.
