Функция по клику в JavaScript: сравнение href и onclick

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

// Для вызова callback-функции в стиле джедаев с поддержкой мидихлориан используйте onclick и возвращайте false, чтобы предотвратить переход по ссылке:
<a href="#" onclick="useTheForce(); return false;">Попробуй onclick, Люк!</a>

// Для перехода на новый URL пользуйтесь href:
<a href="/Death-Star-Blueprints.html">Скачать чертежи Звезды Смерти</a>

onclick служит для вызова функций JavaScript, когда перенаправление на другую страницу не требуется. Возврат false предотвратит переход по ссылке. href же используется для стандартной навигации и улучшает позиционирование сайта в поисковых системах.

Анализируем href и onclick

href и onclick выполняют разные функции в сфере гиперссылок, но иногда их обязанности могут пересекаться. href надежно перенаправляет на новую страницу или якорный тег, в то время как onclick активирует функционал JavaScript на текущей странице. Не забывайте о необходимости правильно задавать href с точки зрения SEO и доступности контента при отключенном JavaScript.

Доступность для различных пользователей

Важно, чтобы каждый мог воспользоваться вашим сайтом, включая поисковых роботов. Атрибут href сделает ссылки доступными для фокусировки и навигации. Чтобы повысить доступность, добавляйте атрибут title и роль aria.

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

Варианты работы в чрезвычайных ситуациях

Если JavaScript в браузере отключен, должна быть предусмотрена альтернативная навигация. Атрибут nohref может оказаться полезным в ситуациях, когда переход по ссылке не требуется.

Интеграция HTML и JavaScript

Для обеспечения повышенной структурированности кода используйте addEventListener для привязки обработчиков событий, избегая при этом встраивания кода JavaScript напрямую в HTML.

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

Если мы представим управление ссылками как командный центр, где существуют тропы A (href) и B (onclick), то href будет основным маршрутом для достижения цели, а onclick — секретным порталом для выполнения дополнительных функций.

Работа со свойствами JavaScript

Предупреждение нежелательных переходов

Используйте e.preventDefault() для предотвращения стандартного поведения ссылок, сохраняя в то же время другие функции браузера, такие как доступность с клавиатуры.

Визуальные эффекты с использованием this

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

Исключение небезопасных методов

Избегайте использования устаревшего псевдо-протокола javascript: в href, так как он может создать уязвимости. Вместо этого применяйте href="javascript:void(0);" с учетом лучших практик кодирования.

Создание универсального веб-пространства

Стилизация ссылок играет важную роль в восприятии пользователем вашего сайта. Применяйте CSS для улучшения внешнего вида ссылок, а cursor: pointer; будет сигнализировать пользователю о том, что элемент кликабелен.

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

Перечень ресурсов, где вы можете узнать больше о работе с событием onclick, применении href, дискуссиях о возможности замены ссылок на кнопки, справочниках по событиям JavaScript, работе со слушателями событий и использовании data-атрибутов.