Какое значение "href" я должен использовать для ссылок JavaScript, "#" или "javascript: void (0)"?

Question

Ниже приведены два метода создания ссылки, единственной целью которой является выполнение кода JavaScript. Что лучше с точки зрения функциональности, скорости загрузки страницы, целей проверки и т. Д.?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

или

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Answer 1

В полном согласии с общим мнением, используйте void(0), когда вам это нужно, и используйте действительный URL-адрес, когда вам это нужно.

Используя перезапись URL , вы можете сделать URL-адреса, которые не только делают то, что вы хотите сделать с отключенным JavaScript, но и точно сказать, что он собирается делать.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

На стороне сервера, вам просто нужно проанализировать URL и строку запроса и сделать то, что вы хотите. Если вы сообразительны, вы можете позволить серверному скрипту по-разному отвечать как на Ajax, так и на стандартные запросы. Позволяет вам иметь краткий централизованный код, который обрабатывает все ссылки на вашей странице.

Учебники по перезаписи URL

Плюсы

• Отображается в строке состояния
• Легко обновляется до Ajax с помощью обработчика onclick в JavaScript
• Практически комментирует себя
• Предотвращает засорение каталогов одноразовыми HTML-файлами

Против

• Следует по-прежнему использовать event.preventDefault () в JavaScript
• Довольно сложная обработка пути и анализ URL на стороне сервера.

Я уверен, что есть тонны больше минусов там. Не стесняйтесь обсуждать их.

Answer 2

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

Answer 3

Если вы используете элемент <a>, просто используйте это:

<a href="javascript:myJSFunc();" />myLink</a>

Лично я бы позже вместо этого прикрепил обработчик событий с JavaScript (используя attachEvent или addEventListener или, может быть, <разместите здесь свою любимую среду JavaScript>).

Answer 4

На современном веб-сайте следует избегать использования href, если элемент выполняет только функции JavaScript (а не реальную ссылку).

Почему? Наличие этого элемента говорит браузеру, что это ссылка с пунктом назначения. При этом браузер покажет функцию «Открыть в новой вкладке / окне» (также срабатывает при нажатии клавиш Shift + щелчок). Это приведет к открытию той же страницы без запуска нужной функции (что приведет к разочарованию пользователя).

В отношении IE: Начиная с IE8, стиль элемента (включая наведение) работает, если задан тип документа. Другие версии IE больше не о чем беспокоиться.

Только недостаток: Удаление HREF удаляет tabindex. Чтобы преодолеть это, вы можете использовать кнопку в стиле ссылки или добавить атрибут tabindex с помощью JS.

Answer 5

Если вы используете ссылку как способ , просто выполните некоторый код JavaScript (вместо того, чтобы использовать диапазон, как рекомендуется D4V360), просто выполните:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Если вы используете для навигации ссылку с onclick, не используйте href = "#" в качестве запасного варианта, когда JavaScript отключен. Это обычно очень раздражает, когда пользователь нажимает на ссылку. Вместо этого предоставьте ту же ссылку, которую предоставит обработчик onclick, если это возможно. Если вы не можете этого сделать, пропустите onclick и просто используйте URI JavaScript в href.

Answer 6

Я настоятельно предпочитаю, чтобы мой JavaScript не использовался в моей HTML-разметке, насколько это возможно. Если я использую <a> в качестве обработчиков событий клика, то я бы рекомендовал использовать <a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Очень важно отметить, что многие разработчики считают, что использование тегов привязки для обработчиков событий щелчка не очень хорошо. Они предпочли бы, чтобы вы использовали <span> или <div> с некоторым CSS, который добавляет к нему cursor: pointer;. Это вопрос большого спора.

Answer 7

Вы не должны использовать inline onclick="something();" в своем HTML, чтобы не загрязнять его бессмысленным кодом; все привязки кликов должны быть установлены в файлах Javascript (* .js).

Установите привязку следующим образом: $('#myAnchor').click(function(){... **return false**;}); или $('#myAnchor').bind('click', function(){... **return false**;});

Тогда у вас есть чистый HTML-файл, который легко загрузить (и оптимизировать для SEO) без тысяч href="javascript:void(0);" и просто href="#"

Answer 8

Просто чтобы поднять вопрос, о котором упоминали другие.

Намного лучше связать событие 'onload'a или $ (' document '). Ready {}; затем поместить JavaScript непосредственно в событие click.

В случае, если JavaScript недоступен, я бы использовал href для текущего URL и, возможно, привязку к позиции ссылки. Страница по-прежнему может быть использована людьми без JavaScript, которые не заметят никакой разницы.

Как я понял, вот несколько jQuery, которые могут помочь:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

Answer 9

• Javascript: void(0); не имеет значения NULL [Не назначено] , что означает, что ваш браузер собирается NULL нажать DOM , и окно вернется к значению false
• '#' не следует DOM или Window в javascript. это означает, что знак «#» внутри якорной ссылки является LINK . Ссылка в том же направлении.

Answer 10

Вот еще один вариант для полноты картины, который не позволяет ссылке делать что-либо, даже если JavaScript отключен, и она короткая:)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

Если идентификатор не присутствует на странице, то ссылка ничего не сделает.

Как правило, я согласен с ответом Аарона Вагнера: в документ должна быть вставлена ​​ссылка JavaScript с кодом JavaScript.