Какое значение "href" я должен использовать для ссылок JavaScript, "#" или "javascript: void (0)"? - PullRequest
3882 голосов
/ 25 сентября 2008

Ниже приведены два метода создания ссылки, единственной целью которой является выполнение кода 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>

Ответы [ 53 ]

2100 голосов
/ 26 сентября 2008

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

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

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

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

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

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

onclick="someFunc.call(this)"

OR

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

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

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

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

OR

Использование href="javascript:void(0)"

Со вторым намного легче общаться.

1261 голосов
/ 25 сентября 2008

Ни.

Если у вас есть реальный URL, который имеет смысл, используйте его в качестве HREF. Онклик не сработает, если кто-то щелкнет средней кнопкой мыши по вашей ссылке, чтобы открыть новую вкладку, или если у него отключен JavaScript.

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

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

Извлечение Ненавязчивый JavaScript и Прогрессивное улучшение (обе Википедии).

758 голосов
/ 25 февраля 2012

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

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

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

  3. В настоящее время существуют лучшие, более простые и более поддерживаемые и масштабируемые способы достижения желаемого результата.

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

Просто не имеет атрибута href! Любой хороший сброс CSS позаботится о отсутствующем стиле курсора по умолчанию, так что это не проблема. Затем добавьте свою функциональность 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() для вашего вызова, чтобы убедиться, что при нажатии кнопки она не переходит по ссылке. Эта опция называется постепенной деградацией.

304 голосов
/ 25 сентября 2008

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

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

245 голосов
/ 15 декабря 2011

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

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

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


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

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

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

137 голосов
/ 25 сентября 2008

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

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

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

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

Смотри здесь https://stackoverflow.com/a/45465728/2803344

95 голосов
/ 25 сентября 2008

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

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

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

95 голосов
/ 25 сентября 2008

Ни один, если вы спросите меня;

Если ваша «ссылка» имеет единственную цель - запустить какой-либо код 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>
75 голосов
/ 24 сентября 2011

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

63 голосов
/ 17 апреля 2009

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

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

вместо

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