Вопрос: Какое значение «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>


3630


источник


Ответы:


я использую javascript:void(0),

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

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

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

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

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

onclick="someFunc.call(this)"

ИЛИ

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

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

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

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

ИЛИ

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

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


1982



Ни.

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

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

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

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


1186



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


728



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

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


274



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


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

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

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


202



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

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

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

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

Глянь сюда https://stackoverflow.com/a/45465728/2803344


127



Ideally you'd do this:

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

Or, even better, you'd have the default action link in the HTML, and you'd add the onclick event to the element unobtrusively via JavaScript after the DOM renders, thus ensuring that if JavaScript is not present/utilized you don't have useless event handlers riddling your code and potentially obfuscating (or at least distracting from) your actual content.


90



Neither if you ask me;

If your "link" has the sole purpose of running some JavaScript code it doesn't qualify as a link; rather a piece of text with a JavaScript function coupled to it. I would recommend to use a <span> tag with an onclick handler attached to it and some basic CSS to immitate a link. Links are made for navigation, and if your JavaScript code isn't for navigation it should not be an <a> tag.

Example:

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>


86



Using just # makes some funny movements, so I would recommend to use #self if you would like to save on typing efforts of JavaScript bla, bla,.


73



I use the following

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

instead

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

55