Нужно ли использовать ‘#’ или ‘javascript:void(0)’ в href-атрибуте пустых ссылок
Стоит ли применять JavaScript void 0 ? Если использовать # , и тем самым препятствуя привычной работе ссылок, ( например, для прокрутки к верху страницы ), то приходится указывать и значение return false для функции в событии onclick :
Hey Hey
Если вместо этого использовать javascript:void , то использовать return false не нужно, так как void(0) – самый миниатюрный скрипт, который расценивается как undefined . То есть:
Тот же эффект, что и при использовании href=»#» , только код с JavaScript void меньше и чище.
Обновлено: 2022-01-15 15:28:03 Валентин Сейидов автор материала
JavaScript: void(0)
Когда мы используем JavaScript в навигации, значение return в исполняемом скрипте становится содержимым нового документа, который отображается в браузере. Оператор void превращает значение return value в следующем за ним выражении в return undefined , что и предотвращает исполнение данного события.
Ссылка перенаправляет браузер на текстовую версию результатов, которые расценены как JavaScript . Однако если результатом будет undefined , то браузер останется на той же странице. JavaScript void 0 — что значит? Это миниатюрный скрипт, который определяется как undefined .
Однако javascript:void(0) ; нарушает Content Security Policy ( CSP, политика защиты контента ) у протокола HTTPS эта защита включена. Это помогает выявлять и нивелировать определенные типы атак, включая Cross-Site Scripting ( XSS ), инъекции вредоносных данных.
Следовательно, если вы суеверный разработчик, то пользуйтесь href=»#» вместо javascript:void и не беспокойтесь о нарушении политики защиты.
Href=»#»
Хэш безопаснее в тех случаях, когда у пользователей отключена поддержка JavaScript .
Хотя эту проблему можно легко обойти за счет jQuery :
$('a[href="#"]').click(function(e) < e.preventDefault ? e.preventDefault() : e.returnValue = false; >);
Можно даже вернуть false в атрибут элемента onclick , и получить тот же эффект:
Несколько рекомендаций напоследок
В href javascript void 0 используется, если нужен четкий и быстрый результат.
href=»#» и предотвращение исполнения события используется тогда, когда не хочется нарушать стандарты JavaScript.
- Если ссылка никуда не ведёт, не используйте элемент . Воспользуйтесь элементом , а также не забудьте стилизовать ссылки при помощи CSS ;
- Представление не следует смешивать с содержанием. Это значит никаких javascript:action и атрибутов onclick . Вместо этого предотвратите исполнение события при помощи чистого кода JavaScript .
void operator
Оператор void вычисляет переданное выражение и возвращает undefined .
Синтаксис
void expression
Описание
Этот оператор позволяет вставлять выражения, которые производят дополнительные действия, в места, где ожидается undefined .
Оператор void часто используется для получения примитивного значения undefined , используя «void(0)» (что эквивалентно «void 0» ). В подобных случаях можно просто использовать глобальную переменную undefined (предполагая, что её значение по умолчанию не было изменено).
Самовызывающаяся функция (IIFE)
С оператором void можно использовать самовызывающиеся функции.
void (function iife() var bar = function () >; var baz = function () >; var foo = function () bar(); baz(); >; var biz = function () >; foo(); biz(); >)();
JavaScript URIs
Когда браузер переходит по javascript: URI , он вычисляет код в URI и заменяет содержание страницы возвращённым значением, если оно не равно undefined . Можно воспользоваться оператором void для возврата undefined . Например:
a href="javascript:void(0);">Click here to do nothinga> a href="javascript:void(document.body.style.backgroundColor='green');"> Click here for green background a>
Однако заметим, что не рекомендуется использовать псевдо-протокол javascript: . Лучше прибегнуть к другим альтернативам, таким, как обработчики событий.
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-void-operator |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
javascript void 0 как исправить
javascript:void(0) используется чаще всего для создания ссылок, которые не переходят на другую страницу, но запускают JavaScript. Однако, современные стандарты рекомендуют избегать использование javascript:void(0) , так как оно может вызвать проблемы с безопасностью и доступностью.
Лучшим подходом для создания ссылок, которые запускают JavaScript, является использование обработчиков событий. Например, для создания ссылки, которая запускает функцию myFunction() , можно использовать следующий код:
href="#" onclick="myFunction()">Нажми меня Здесь href=»#» указывает браузеру, что ссылка должна оставаться на текущей странице, а onclick указывает браузеру, что при нажатии на ссылку должна запуститься функция myFunction() .
Также можно использовать метод addEventListener() для добавления обработчика событий на ссылку:
href="#" id="myLink">Нажми меня const link = document.querySelector('#myLink'); link.addEventListener('click', myFunction); Здесь мы выбираем ссылку с помощью document.querySelector() , добавляем ей уникальный идентификатор id , и затем добавляем обработчик событий на эту ссылку с помощью addEventListener() .
В защиту javascript:void(0);
Намедни я решил посмотреть новости через Google. Нажимаю правой кнопкой на ссылку «другие новости» и в контекстном меню нет пунтка открыть в новом окне. Я решил глянуть исходный код и вижу javascript:void(0);
Для меня это стало новостью, ведь все что читал до этого — было однозначно против такого решения.
Я имею ввиду ситуацию когда ссылка запускает какой-то js код и по прямому назначению не используется, то какую разметку лучше использовать?
.
или
.
Void лучше href=»#» поскольку поведение href=»#» при открытии в новом окне для пользователей неожиданно: пользователь кликает на 15 ссылок правой кнопкой мыши и открывает каждую в новой вкладке. В итоге у него 16 вкладок с одним и тем-же документом.
Чтобы если вдруг стандарт «javascript:» отменят не было коллизий используйте вместе с ним onclick=«return false;». Подсмотрено у Гугл ньюс: