Какое значение "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

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

Проблема этого подхода заключается в том, что если функция не будет работать или возникнут какие-либо проблемы, ссылка станет неактивной. Событие Onclick всегда будет возвращать false, поэтому обычный URL не будет вызываться.

Там очень простое решение. Пусть функция вернет true, если она работает правильно. Затем используйте возвращенное значение, чтобы определить, следует ли отменить щелчок или нет:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

---

Обратите внимание, что я отменяю результат функции doSomething(). Если он работает, он вернет true, поэтому он будет отменен (false) и path/to/some/URL не будет вызван. Если функция вернет false (например, браузер не поддерживает что-то используемое внутри функции или что-то еще идет не так), она сводится к true и вызывается path/to/some/URL.

Answer 2

# лучше, чем javascript:anything, но следующее даже лучше:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Вы всегда должны стремиться к постепенной деградации (в случае, если у пользователя не включен JavaScript ... и когда он имеет спецификации и бюджет). Кроме того, считается неправильным использовать атрибуты JavaScript и протокол напрямую в HTML.

Answer 3

Если вы не пишете ссылку, используя JavaScript (чтобы вы знали, что она включена в браузере), в идеале вы должны предоставить правильную ссылку для людей, которые просматривают с отключенным JavaScript, а затем запретить действие ссылки по умолчанию в вашем обработчике события onclick. Таким образом, те, у кого включен JavaScript, будут запускать эту функцию, а те, у кого JavaScript отключен, будут переходить на соответствующую страницу (или местоположение на той же странице), а не просто нажимать на ссылку и ничего не происходит.

Answer 4

Я рекомендую вместо этого использовать элемент <button>, , особенно , если предполагается, что элемент управления приведет к изменению данных. (Что-то вроде ПОЧТЫ.)

Еще лучше, если вы будете вводить элементы незаметно, что является прогрессивным улучшением. (См. этот комментарий .)

Answer 5

Определенно хеш (#) лучше, потому что в JavaScript это псевдосхема:

1. загрязняет историю
2. создает новую копию движка
3. работает в глобальном масштабе и не учитывает систему событий.

Конечно, "#" с обработчиком onclick, который предотвращает действие по умолчанию, [намного] лучше. Более того, ссылка, единственная цель которой - запустить JavaScript, на самом деле не является «ссылкой», если вы не отправляете пользователя на какой-нибудь разумный якорь на странице (просто # отправит наверх), когда что-то идет не так. Вы можете просто смоделировать внешний вид связи с таблицей стилей и вообще забыть о href.

Кроме того, в отношении предложения Cowgod, в частности: ...href="javascript_required.html" onclick="... Это хороший подход, но он не различает сценарии "JavaScript отключен" и "onclick fails".

Answer 6

Я обычно хожу на

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Это короче javascript: void (0) и делает то же самое.

Answer 7

Я бы использовал:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Причины:

1. Это делает href простым, это нужно поисковым системам. Если вы используете что-либо еще (например, строку), это может вызвать ошибку 404 not found.
2. Когда мышь наводит указатель мыши на ссылку, это не означает, что это скрипт.
3. При использовании return false; страница не переходит наверх и не ломает кнопку back.

Answer 8

Я выбираю использовать javascript:void(0), потому что использование этого может помешать щелчку правой кнопкой мыши, чтобы открыть меню содержимого. Но javascript:; короче и делает то же самое.

Answer 9

Таким образом, когда вы выполняете некоторые вещи JavaScript с тегом <a />, а также, если вы также ставите href="#", вы можете добавить return false в конце события (в случай привязки встроенного события) как:

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

Или вы можете изменить атрибут href с помощью JavaScript, например:

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

или

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

---

Но семантически все вышеперечисленные способы достижения этого неверны (хотя работает нормально) . Если какой-либо элемент не создан для навигации по странице и с ней связаны некоторые вещи JavaScript, то он не должен быть тегом <a>.

Вместо этого вы можете просто использовать <button /> для выполнения каких-либо действий или любых других элементов, таких как b, span или что-то еще, что вам нужно, поскольку вам разрешено добавлять события на все элементы.

---

Итак, есть одно преимущество для использования <a href="#">. Вы получаете указатель курсора по умолчанию на этом элементе, когда делаете a href="#". Для этого, я думаю, вы можете использовать CSS для этого, например cursor:pointer;, который также решает эту проблему.

И, наконец, если вы связываете событие с самим кодом JavaScript, вы можете сделать event.preventDefault(), чтобы добиться этого, если вы используете тег <a>, но если вы не используете тег <a> для этого вы получаете преимущество, вам не нужно этого делать.

Так что, если вы видите, лучше не использовать тег для такого рода вещей.

Answer 10

Было бы лучше использовать jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

и не указывать href="#" и href="javascript:void(0)".

Разметка тега привязки будет выглядеть как

<a onclick="hello()">Hello</a>

Достаточно просто!