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

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

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

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

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

Вторая причина, по которой следует избегать, #заключается в том, что final 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)"

Со вторым явно гораздо проще общаться.

Ни.

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

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

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

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

Делать <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>

Blackboxed Backbone.js пример

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

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

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

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

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

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

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

Первый, в идеале с реальной ссылкой, чтобы следовать в случае, если у пользователя отключен 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

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

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

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

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

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

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

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

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

вместо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Причины:

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

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

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

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

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

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

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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

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

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

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

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

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

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

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

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

Который не будет ничего делать.

К тому же

• Это не приведет вас к началу страницы, как с (#)
  • Поэтому вам не нужно явно возвращать falseс JavaScript
• Это краткое лаконичное

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

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

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

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

Я лично использую их в сочетании. Например:

HTML

<a href="#">Link</a>

с небольшим количеством JQuery

$('a[href="#"]').attr('href','javascript:void(0);');

или

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

Но я использую это только для предотвращения перехода страницы наверх, когда пользователь нажимает на пустой якорь. Я редко использую onClick и другие onсобытия прямо в HTML.

Мое предложение было бы использовать <span>элемент с classатрибутом вместо якоря. Например:

<span class="link">Link</span>

Затем назначьте функцию .linkсценарию, заключенному в тело и непосредственно перед </body>тегом или во внешний документ JavaScript.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Примечание: для динамически создаваемых элементов используйте:

$('.link').on('click', function() {
    // do something
});

А для динамически создаваемых элементов, которые создаются с помощью динамически создаваемых элементов, используйте:

$(document).on('click','.link', function() {
    // do something
});

Затем вы можете стилизовать элемент span, чтобы он выглядел как якорь с небольшим CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Вот пример вышеупомянутого jsFiddle .

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

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

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

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

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

Когда у меня есть несколько поддельных ссылок, я предпочитаю давать им класс «без ссылок».

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

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

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

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

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

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

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

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

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

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

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

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

Вот образец. Home / 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>