Создание недействующих ссылок с jQuery: тег <a> без перехода

Быстрый ответ

Для создания якорной ссылки, которая не перенаправляет пользователя на другую страницу или не изменяет текущую, применяется следующий код, отменяющий все действия:

<a href="javascript:void(0);">Нажми меня</a>

Этот метод прост в реализации и предотвращает любое воздействие на состояние страницы, будь то прокрутка вверх, которая может произойти при использовании href="#". Поэтому он идеально подходит для создания неактивных ссылок.

Альтернативный вариант – это отмена стандартного действия в обработчике событий onClick через JavaScript или jQuery:

<a href="#" onclick="event.preventDefault();">Нажми меня</a>

Или с помощью jQuery:

$('#yourLink').click(function(event) {
  event.preventDefault(); // И отмена перехода. 
});

Распространённые ошибки: минное поле с подводными камнями

В области веб-разработки часто приходится создавать элементы навигации, которые не должны вести на другие страницы, но могут запускать определённые действия или служить маркерами. Понимание разных подходов и их последствий крайне важно.

Скрытая опасность href="#"

Несмотря на популярность этого метода, он может привести к непредвиденной прокрутке страницы вверх. Вы можете это исправить, отменив дефолтное действие:

// Ссылка с href="#" тихо перенаправляет на верх страницы. Всё на этом и заканчивается.
$('#yourLink').click(function(event) {
  event.preventDefault();
});

Подробнее об этом расскажет наш спикер на видео

Переосмыслите использование javascript:void(0)

Использование "javascript:void(0);" эффективно решает задачу, но может вызвать проблемы в Internet Explorer и других устаревших браузерах. Это как будто возвращение в начало 2000-х.

Использование тега <span> вместо кнопки

Тег <span> можно соблазнительно использовать вместо кнопки, применяя cursor: pointer;. Но не забывайте о возможности навигации посредством клавиатуры и обеспечения доступности:

<span tabindex="0" onkeypress="yourKeyPressFunction(event)" onclick="yourClickFunction();" style="cursor: pointer;">Нажми меня</span>

Осознанное управление событиями

Методы event.stopPropagation() и event.preventDefault() важны для контроля над потоком событий, особенно если речь идет о остановке "наводнения" событиями клика.

Менее избитый путь: альтернативы

Ссылка может выглядеть как элемент навигации, но это не обязательно означает, что она должна вести куда-то. Давайте рассмотрим некоторые альтернативные подходы:

Пользовательская обработка с помощью JavaScript

JavaScript и jQuery могут наделить элементы специальными возможностями. Но помните знаменитую фразу, что с великой силой приходит и великая ответственность, поэтому используйте их разумно:

$(document).on('click', '#yourCustomLink', function(event) {
  // Здесь ваш индивидуальный подход и время для творчества!
  event.preventDefault(); 
  event.stopPropagation();
});

Обеспечение доступности

Не забывайте о важности доступности; это не просто слово, это ключевой аспект приложений, делающих использование их доступным для всех без исключения.

Визуализация

Представьте себе кнопку лифта (🔘), нажимая на которую, вы остаётесь на том же этаже:

<a href="#">🔘</a> // Вы нажимаете, ожидая движения, а лифт сообщает: "Я так задуман".

Это как если бы вы столкнулись со знаком "Не входить" (🚫👣) на двери:

Дверь: 🚪🚫👣

Вы пытаетесь открыть её, но она не поддается.

Таким образом, якорная ссылка с href="#" равнозначна указанию "Оставайтесь на месте" (🔗🔄).

Поднятие планки: лучшие практики

Глубокое понимание работы якорных ссылок может повысить ваши профессиональные навыки в разработке.

Использование JavaScript

При помощи JavaScript или jQuery вы можете добавить ценность вашему проекту, не внося хаоса. Но помните: создание ссылки ради ссылки, без выполняющегося действия, напрасно.

Соответствие ожиданиям пользователя

Не важно, какие инновационные технологии вы внедряете, главное — не разочаровывать ожидания пользователей. Ваши ссылки должны вести себя предсказуемо или явно указывать на отклонения от стандартного поведения.

Сочетание стиля и функциональности

Стиль — это не только внешняя привлекательность, но и функциональность. Создавайте ссылки, которые выглядят визуально привлекательно, даже если при нажатии на них ничего не происходит.

Полезные материалы

1. HTML-стандарт – Здесь представлено подробное описание использования placeholder символа '#' в пустых ссылках.
2. Element Anchor – HTML: HyperText Markup Language | MDN – MDN предлагает информацию о якорном элементе ссылки.
3. "Что значит "javascript:void(0)"? – Stack Overflow" – Обсуждение значения 'javascript:void(0)' в сообществе Stack Overflow.
4. Event method: Event.preventDefault() – Веб-API | MDN – Рекомендации по контролю над стандартными событиями.
5. Советы: Как создавать валидные и доступные ссылки – A11Y Project – Рекомендации по созданию доступных и валидных ссылок.
6. Погружение и всплытие – Подробно о событиях JavaScript – Информация об особенностях работы с событиями в JavaScript.