Конструкція javascript:void(0)

Тег href="javascript:void(0)"in HTML <a>— це поширена техніка, яка використовується для запобігання будь-яким діям посилання під час натискання. По суті, це робить посилання нефункціональним з точки зору навігації, але все ще дозволяє йому бути інтерактивним для таких цілей, як ініціювання функцій або подій JavaScript.

Ось розбивка того, що javascript:void(0)робить:

• javascript:це протокол, який використовується для виконання коду JavaScript безпосередньо з URL-адреси або гіперпосилання.
• void(0)є виразом JavaScript. Оператор voidобчислює наступний за ним вираз (у цьому випадку 0), а потім повертає undefined. Це корисно в hrefатрибутах гіперпосилання, щоб гарантувати, що браузер не намагатиметься переспрямувати на нову сторінку чи перезавантажити поточну сторінку. Натомість він фактично нічого не робить з точки зору навігації сторінкою, але все одно виконує код JavaScript, якщо він присутній.

Загальне використання:

1. Запобігання поведінці посилань за замовчуванням : це часто використовується в <a>тегах, де ви насправді не хочете нікуди переходити, але хочете запускати якусь функцію JavaScript після натискання. Це чистіший спосіб, ніж використання #in href, який змінює URL-адресу шляхом додавання решітки (можливо впливає на стан сторінки чи прокручування).
2. Посилання-заповнювач : іноді javascript:void(0)використовується як покажчик місця заповнення в hrefатрибуті, коли фактичне посилання ще не визначено або коли <a>тег призначений виключно для обробки подій через JavaScript.

Альтернативні підходи:

• Використання# : до того, як javascript:void(0)став популярним, #використовувався широко. Однак це може призвести до небажаних змін URL-адреси або вплинути на поведінку прокручування.
• Обробники подій : більш сучасний підхід полягає у використанні обробників подій JavaScript, таких як onClickі запобігання дії за замовчуванням за допомогою event.preventDefault(). Таким чином, ви можете виключити hrefатрибут або використовувати його більш семантичним і доступним способом.

Приклад із сучасним підходом:

У React або сучасних фреймворках JavaScript зазвичай краще приєднувати такі обробники подій, як onClickі використовувати event.preventDefault()всередині обробника подій, щоб зупинити поведінку посилання за замовчуванням, а не використовувати javascript:void(0). Цей підхід чистіший, більш семантичний і ефективніше відокремлює функціональність від презентації.