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

Я бы сказал, что лучший способ - это сделать href-привязку к идентификатору, который вы никогда не будете использовать, например, # Do1Not2Use3This4Id5 или подобный идентификатор, который вы на 100% уверены, что никто не будет использовать и не будет обижать людей.

1. Javascript:void(0) является плохой идеей и нарушает Политику безопасности контента на страницах HTTPS с поддержкой CSP https://developer.mozilla.org/en/docs/Security/CSP (спасибо @ jakub.g)
2. Использование только # заставит пользователя перейти наверх при нажатии
3. Не испортит страницу, если JavaScript не включен (если у вас нет JavaScript-кода, определяющего код
4. Если JavaScript включен, вы можете отключить событие по умолчанию
5. Вы должны использовать href, если вы не знаете, как запретить вашему браузеру выделять какой-либо текст (не знаю, удалит ли использование 4 то, что мешает браузеру выбирать текст)

По сути, никто не упомянул 5 в этой статье, что, я думаю, важно, поскольку ваш сайт становится непрофессиональным, если он внезапно начинает выбирать объекты по ссылке.

Answer 2

Вы также можете написать подсказку в привязке, как это:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

чтобы пользователь знал, что делает эта ссылка.

Answer 3

Приятно, чтобы ваш сайт был доступен пользователям с отключенным JavaScript, и в этом случае href указывает на страницу, которая выполняет то же действие, что и выполняемый JavaScript. В противном случае я использую « # » с «return false;» для предотвращения действия по умолчанию (прокрутка вверх страницы), как уже упоминали другие.

Google для "javascript:void(0)" предоставляет много информации по этой теме. Некоторые из них, например , , упоминают причины, по которым НЕ следует использовать void (0) .

.

Answer 4

Я вижу много ответов от людей, которые хотят продолжать использовать # значения для href, следовательно, вот ответ, который, мы надеемся, удовлетворит оба лагеря:

A) Я рад иметь javascript:void(0) в качестве моего href значения:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) Я использую jQuery и хочу # в качестве значения href:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Обратите внимание: если вы знаете, что ссылки не будут создаваться динамически, используйте вместо этого функцию click:

$('a[href="#"]').click(function(e) {

Answer 5

Я использую href = "#" для ссылок, для которых я хочу фиктивное поведение. Тогда я использую этот код:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

То есть, если href равен хешу (* = "#"), это предотвращает поведение ссылки по умолчанию, тем самым позволяя вам написать функциональность для него, и это не влияет на клики привязки.

Answer 6

Здесь нужно запомнить еще одну важную вещь. Раздел 508 соответствие. Из-за этого я считаю необходимым указать, что вам нужен тег привязки для программ чтения с экрана, таких как JAWS , чтобы иметь возможность фокусировать его с помощью табуляции. Таким образом, решение «просто используйте JavaScript и забудьте о привязке для начала» не подходит для некоторых из них. Запуск JavaScript внутри href необходим только в том случае, если вы не можете позволить экрану перепрыгнуть вверх. Вы можете использовать settimeout в течение 0 секунд и запустить JavaScript там, где вам нужно сосредоточиться, но даже апейдж прыгнет наверх и затем вернется.

Answer 7

Что я понимаю из ваших слов, так это то, что вы хотите создать ссылку только для запуска кода JavaScript.

Тогда вы должны учитывать, что есть люди, которые блокируют JavaScript в своих браузерах.

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

По этой причине ни один из них не годится, когда JavaScript отключен.

А, если JavaScript включен и вы хотите использовать эту ссылку только для вызова функции JavaScript, тогда

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

гораздо лучший способ, чем

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

потому что href = "#" заставит страницу выполнить ненужные действия.

Кроме того, еще одна причина, по которой <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> лучше, чем <a href="#" onclick="myJsFunc();">Link</a>, заключается в том, что JavaScript используется в качестве языка сценариев по умолчанию для большинства браузеров. В качестве примера Internet Explorer использует атрибут onclick для определения типа языка сценариев, который будет использоваться. Если не появится другой хороший язык сценариев, Internet Explorer также будет использовать JavaScript по умолчанию, но если другой язык сценариев использует javascript:, это позволит Internet Explorer понять, какой язык сценариев используется.

Учитывая это, я бы предпочел использовать и тренироваться на

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

достаточно, чтобы сделать это привычкой и быть более удобным для пользователя, пожалуйста, добавьте такие ссылки в коде JavaScript:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});

Answer 8

Вы можете использовать href и удалить все ссылки, которые имеют только хэши:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

Answer 9

Почему бы не использовать это? Это не прокручивает страницу вверх.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>

Answer 10

В идеале у вас должен быть реальный URL как запасной вариант для пользователей, не поддерживающих JavaScript.

Если это не имеет смысла, используйте # в качестве атрибута href. Мне не нравится использовать атрибут onclick, поскольку он встраивает JavaScript прямо в HTML. Лучше было бы использовать внешний файл JS, а затем добавить обработчик событий к этой ссылке. Затем вы можете предотвратить событие по умолчанию, чтобы URL-адрес не изменялся, добавляя # после того, как пользователь щелкнет по нему.