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

Ниже приведены два метода построения ссылки, которая имеет единственную цель запуска 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>
3602
задан 2cBGj7vsfp 25 сент. '08 в 20:54
источник поделиться

53 ответов

  • 1
  • 2

Я использую javascript:void(0).

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

function doSomething() {
    //Some code
    return false;
}

Но затем они забывают использовать return doSomething() в onclick и просто использовать doSomething().

Вторая причина избегать # заключается в том, что окончательный return false; не будет выполняться, если вызываемая функция выдает ошибку. Следовательно, разработчики должны также помнить, что надлежащим образом обрабатывать любую ошибку в вызываемой функции.

Третья причина заключается в том, что бывают случаи, когда свойство события onclick назначается динамически. Я предпочитаю иметь возможность вызывать функцию или назначать ее динамически без необходимости кодирования функции специально для одного метода вложения или другого. Следовательно, my onclick (или на чем-либо) в разметке HTML выглядит следующим образом:

onclick="someFunc.call(this)"

ИЛИ

onclick="someFunc.apply(this, arguments)"

Использование javascript:void(0) позволяет избежать всех вышеупомянутых головных болей, и я не нашел примеров недостатков.

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

Используйте href="#", убедитесь, что onclick всегда содержит return false; в конце, что любая вызываемая функция не выдает ошибку и если вы динамически присоединяете функцию к свойству onclick, убедитесь, что так же, как и не выдавая ошибку, он возвращает false.

ИЛИ

Используйте href="javascript:void(0)"

Во-вторых, гораздо проще общаться.

1967
ответ дан AnthonyWJones 26 сент. '08 в 11:03
источник поделиться

Ни.

Если вы можете иметь фактический URL-адрес, который имеет смысл использовать это как HREF. Onclick не будет срабатывать, если кто-то нажимает на вашу ссылку, чтобы открыть новую вкладку, или если у них отключен JavaScript.

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

Я понимаю, что это не всегда возможно, но, на мой взгляд, ему следует стремиться к разработке любого общедоступного веб-сайта.

Откажитесь от ненавязчивый JavaScript и прогрессивное улучшение (оба Википедия).

1181
ответ дан Aaron Wagner 25 сент. '08 в 21:09
источник поделиться

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

  • Это способствует практике навязчивого JavaScript - что оказалось трудно поддерживать и сложно масштабировать. Подробнее об этом в Ненавязчивый JavaScript.

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

  • Теперь есть лучшие, более простые и удобные и масштабируемые способы достижения желаемого результата.

Ненавязчивый JavaScript-способ

Просто не имеет атрибута href вообще! Любой хороший CSS reset будет следить за отсутствующим стилем курсора по умолчанию, так что это не проблема. Затем добавьте свои функции JavaScript, используя изящные и ненавязчивые передовые методы, которые более удобны в обслуживании, поскольку ваша логика JavaScript остается в JavaScript, а не в вашей разметке, что необходимо при разработке широкомасштабных приложений JavaScript, которые требуют, чтобы ваша логика была разделена на черные компоненты и шаблоны. Подробнее об этом в Крупномасштабная архитектура приложений JavaScript

Пример простого кода

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>
  

Черное окно Пример Backbone.js

Для примера масштабируемого, черного ящика, компонента Backbone.js - см. здесь рабочий пример jsfiddle. Обратите внимание на то, как мы используем ненавязчивые методы работы с JavaScript, а в небольшом количестве кода есть компонент, который может повторяться на странице несколько раз без побочных эффектов или конфликтов между различными экземплярами компонентов. Потрясающе!

Примечания

  • Опускание атрибута href в элементе a приведет к тому, что элемент не будет доступен с помощью навигации по клавише tab. Если вы хотите, чтобы эти элементы были доступны с помощью клавиши tab, вы можете установить атрибут tabindex или вместо него использовать button. Вы можете легко стилизовать элементы кнопки, чтобы они выглядели как обычные ссылки, как указано в ответ Tracker1.

  • Опускание атрибута href в элементе a приведет к Internet Explorer 6 и Internet Explorer 7, чтобы не принимать стиль a:hover, поэтому мы добавили простой JavaScript-прокладку, чтобы выполнить это с помощью a.hover. Что совершенно нормально, как будто у вас нет атрибута href и нет грамотного деградации, тогда ваша ссылка не будет работать в любом случае - и у вас появятся более серьезные проблемы.

  • Если вы хотите, чтобы ваше действие по-прежнему работало с отключенным JavaScript, используйте элемент a с атрибутом href, который отправляется на некоторый URL-адрес, который будет выполнять действие вручную, а не через запрос Ajax или что-то еще должен быть путь. Если вы делаете это, то вы хотите, чтобы вы делали event.preventDefault() при вызове вашего клика, чтобы убедиться, что при нажатии кнопки он не следует по ссылке. Эта опция называется грациозным ухудшением.

725
ответ дан balupton 25 февр. '12 в 5:08
источник поделиться

'#' вернет пользователя в начало страницы, поэтому я обычно иду с void(0).

javascript:; также ведет себя как javascript:void(0);

273
ответ дан Adam Tuttle 25 сент. '08 в 20:55
источник поделиться

Я бы честно не предлагал ни того, ни другого. Я бы использовал стилизованный <button> </button> для этого поведения.

  button.link {
 display: inline-block;
 позиция: относительная;
 background-color: transparent;
 курсор: указатель;
 border: 0;
 заполнение: 0;
 цвет: # 00f;
 text-decoration: подчеркивание;
 font: inherit;
}Код>
  <p> Кнопка, которая выглядит как кнопка < button type = "button" class= "link" > link </кнопка >. </р >код>

Таким образом вы можете назначить свой onclick. Я также предлагаю привязать скрипт, не используя атрибут onclick в теге элемента. Единственный полученный текст - это текстовый эффект psuedo в старых IE, который нельзя отключить.


Если вы MUST используете элемент A, используйте javascript: void (0); по уже упомянутым причинам.

  • Всегда будет перехватываться в случае сбоя события onclick.
  • Не будет происходить ошибочная загрузка вызовов или запуск других событий на основе изменения хеша
  • Хэш-тег может вызвать непредвиденное поведение, если щелчок падает (onclick throws), избегая его, если это не является подходящим поведением, и вы хотите изменить историю навигации.

ПРИМЕЧАНИЕ. Вы можете заменить 0 на строку, такую ​​как javascript: void ('Удалить запись 123'), которая может служить дополнительным индикатором, который покажет, что на самом деле щелчок.

195
ответ дан Tracker1 15 дек. '11 в 21:41
источник поделиться

Первый, в идеале, с реальной ссылкой, если пользователь отключил JavaScript. Просто верните false, чтобы предотвратить событие щелчка при запуске JavaScript.

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

Если вы используете Angular2, этот способ работает:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

См. здесь qaru.site/questions/23049/...

125
ответ дан Zach 25 сент. '08 в 20:56
источник поделиться

В идеале вы бы это сделали:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

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

89
ответ дан Steve Paulo 25 сент. '08 в 21:35
источник поделиться

Не спрашивайте меня,

Если ваша "ссылка" имеет единственную цель для запуска некоторого кода JavaScript, она не квалифицируется как ссылка; скорее часть текста с функцией JavaScript, связанной с ней. Я бы рекомендовал использовать тег <span> с прикрепленным к нему тегом onclick handler и некоторым базовым CSS для имитации ссылки. Ссылки сделаны для навигации, и если ваш код JavaScript не предназначен для навигации, он не должен быть тегом <a>.

Пример:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>
84
ответ дан fijter 25 сент. '08 в 21:59
источник поделиться

Используя только # делает несколько смешных движений, поэтому я бы рекомендовал использовать #self, если вы хотите сохранить при вводе усилий JavaScript bla, bla,.

72
ответ дан Spammer Joe 24 сент. '11 в 4:55
источник поделиться

Я использую следующие

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

вместо

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
55
ответ дан se_pavel 17 апр. '09 в 9:49
источник поделиться

Я согласен с предложениями в другом месте, заявляя, что вы должны использовать обычный 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.

49
ответ дан Fczbkk 27 сент. '08 в 13:58
источник поделиться

# лучше, чем 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.

48
ответ дан Justin Johnson 23 нояб. '09 в 23:38
источник поделиться

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

36
ответ дан Simon Forrest 25 сент. '08 в 21:02
источник поделиться

Вместо этого рекомендуется использовать элемент <button>, особенно если элемент управления должен произвести изменение данных. (Что-то вроде POST.)

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

34
ответ дан phyzome 16 окт. '08 в 20:46
источник поделиться

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

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

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

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

34
ответ дан Free Consulting 07 нояб. '09 в 5:26
источник поделиться

Я обычно иду за

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

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

28
ответ дан dnetix 13 авг. '15 в 4:01
источник поделиться

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

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

Причины:

  • Это делает href простым, поисковые системы ему нужны. Если вы используете что-либо еще (например, строку), это может привести к ошибке 404 not found.
  • Когда мышь наводится на ссылку, она не показывает, что это script.
  • Используя return false;, страница не переместится вверх или не сломает кнопку back.
26
ответ дан Eric Yin 16 дек. '11 в 3:09
источник поделиться

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

21
ответ дан user564706 26 июля '11 в 14:35
источник поделиться

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

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

и опустить как href="#", так и href="javascript:void(0)".

Обозначение метки привязки будет выглядеть как

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

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

21
ответ дан naveen 23 окт. '08 в 12:55
источник поделиться

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

<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> для этого вы получаете преимущество, вам не нужно это делать.

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

21
ответ дан Ashish Kumar 13 февр. '14 в 6:34
источник поделиться

Не используйте ссылки с единственной целью запуска JavaScript.

Использование href= "#" прокручивает страницу вверху; использование void (0) создает навигационные проблемы в браузере.

Вместо этого используйте элемент, отличный от ссылки:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

И стиль его с помощью CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
20
ответ дан Garrett 26 янв. '16 в 22:54
источник поделиться

Если вы используете AngularJS, вы можете использовать следующее:

<a href="">Do some fancy JavaScript</a>

Что не сделает ничего.

Кроме того,

  • Это не приведет вас к началу страницы, как в случае (#)
    • Поэтому вам не нужно явно возвращать false с помощью JavaScript
  • Кратко краткое
20
ответ дан whirlwin 26 июля '13 в 1:31
источник поделиться

Если нет href, возможно, нет причин использовать тег привязки.

Вы можете присоединять события (щелчок, наведение и т.д.) почти на каждом элементе, поэтому почему бы просто не использовать span или div?

И для пользователей с отключенным JavaScript: если нет резервной копии (например, альтернативы href), они должны по крайней мере не иметь возможности видеть и взаимодействовать с этим элементом вообще, независимо от того, что это <a> или тега <span>.

17
ответ дан achairapart 29 июня '13 в 17:43
источник поделиться

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

Пример... Скажем, у вас есть следующая поисковая ссылка:

<a href="search.php" id="searchLink">Search</a>

Вы всегда можете сделать следующее:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Таким образом, люди с отключенным JavaScript привязаны к search.php, в то время как ваши зрители с JavaScript просматривают расширенные функции.

17
ответ дан Andrew Moore 16 окт. '08 в 21:00
источник поделиться

Я попробовал оба в google chrome с инструментами разработчика, а id="#" занял 0,32 секунды. В то время как метод javascript:void(0) занял всего 0,18 секунды. Итак, в google chrome javascript:void(0) работает лучше и быстрее.

16
ответ дан user6460587 29 окт. '16 в 22:10
источник поделиться

Я считаю, что вы представляете ложную дихотомию. Это не единственные два варианта.

Я согласен с г-ном D4V360, который предположил, что, хотя вы используете якорный тег, у вас действительно нет якоря здесь. Все, что у вас есть, - это специальный раздел документа, который должен вести себя немного иначе. Тег <span> гораздо более уместен.

15
ответ дан Clever Human 26 сент. '08 в 0:20
источник поделиться

Когда у меня есть несколько ссылок faux, я предпочитаю дать им класс "no-link".

Затем в jQuery я добавляю следующий код:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

И для HTML ссылка просто

<a href="/" class="no-link">Faux-Link</a>

Мне не нравится использовать Hash-теги, если они не используются для привязок, и я делаю только это, когда у меня есть более двух faux-ссылок, иначе я иду с javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Как правило, мне нравится просто избегать использования ссылки вообще и просто переносить что-то в промежутке и использовать это как способ для работы с некоторым кодом JavaScript, например всплывающее окно или раскрытие содержимого.

15
ответ дан Stacks on Stacks on Stacks 25 июня '12 в 22:34
источник поделиться

В зависимости от того, что вы хотите выполнить, вы можете забыть onclick и просто использовать href:

<a href="javascript:myJsFunc()">Link Text</a>

Он обходит необходимость возвращать false. Мне не нравится параметр #, потому что, как уже упоминалось, он будет находиться в верхней части страницы. Если у вас есть где-то еще, чтобы отправить пользователя, если у них нет JavaScript (что редко, где я работаю, но очень хорошая идея), то Стив предложил метод отлично работает.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Наконец, вы можете использовать javascript:void(0), если вы не хотите, чтобы кто-то никуда уходил, и если вы не хотите вызывать функцию JavaScript. Он отлично работает, если у вас есть изображение, с которым вы хотите выполнить событие mouseover, но для пользователя нечего делать.

15
ответ дан Will Read 26 сент. '08 в 0:02
источник поделиться

Я в основном перефразирую эту практическую статью с использованием прогрессивного улучшения. Короткий ответ заключается в том, что вы никогда не используете javascript:void(0); или #, если ваш пользовательский интерфейс уже не определил, что JavaScript включен, и в этом случае вы должны использовать javascript:void(0);. Кроме того, не используйте span в качестве ссылок, поскольку для начала это семантически ложно.

Использование SEO дружественных URL-адресов в вашем приложении, таких как /Home/Action/Parameters, является хорошей практикой. Если у вас есть ссылка на страницу, которая работает без JavaScript, вы можете улучшить опыт после этого. Используйте реальную ссылку на рабочую страницу, а затем добавьте событие onlick, чтобы улучшить презентацию.

Вот пример. Главная /ChangePicture - это рабочая ссылка на форму на странице в комплекте с пользовательским интерфейсом и стандартными кнопками отправки HTML, но она выглядит более удобной в виде модального диалога с кнопками jQueryUI. В любом случае работает, в зависимости от браузера, который удовлетворяет первой мобильной разработке.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
13
ответ дан Josh Simerman 15 дек. '11 в 1:09
источник поделиться

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

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

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

11
ответ дан Anders M. 20 марта '14 в 13:55
источник поделиться
  • 1
  • 2

Другие вопросы по меткам