Я использую 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)"

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

Ни.

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

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

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

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

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

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

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

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

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

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

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

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

См. здесь https://stackoverflow.com/questions/35639174/passive-link-in-angular-2-a-href-equivalent

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

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

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

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

Если ваша "ссылка" имеет единственную цель для запуска некоторого кода 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>

Используя только # делает несколько смешных движений, поэтому я бы рекомендовал использовать #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>, особенно если элемент управления должен произвести изменение данных. (Что-то вроде POST.)

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

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

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

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

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

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

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

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

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

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

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

Причины:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

Вы можете использовать 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

});

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

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

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

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

A и если 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 для определения типа используемого языка сценариев. Если другой хороший язык сценариев не появится, JavaScript будет использоваться Internet Explorer как по умолчанию, но если другой язык сценариев используется 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>')
});

В общем согласии с общим настроем используйте void(0), когда вам это нужно, и используйте действительный URL-адрес, когда вам это нужно.

Используя переписывание URL-адресов, вы можете создавать URL-адреса, которые не только делают то, что вы хотите сделать с отключенным JavaScript, но и точно говорите, что именно происходит сделать.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

На стороне сервера вам просто нужно проанализировать URL-адрес и строку запроса и сделать то, что вы хотите. Если вы умны, вы можете разрешить стороне сервера script отвечать на Ajax и стандартные запросы по-разному. Позволяет вам иметь краткий централизованный код, который обрабатывает все ссылки на вашей странице.

Учебники по перезаписи URL

Доводы

• Показывает в строке состояния
• Легко обновляется до Ajax с помощью обработчика onclick в JavaScript
• Практически комментирует себя
• Сохраняет, что ваши каталоги забиты одноразовыми файлами HTML

против

• Должен по-прежнему использовать event.preventDefault() в JavaScript
• Довольно сложная обработка пути и анализ URL-адресов на стороне сервера.

Я уверен, что там больше тонн. Не стесняйтесь обсуждать их.

Если вы используете элемент <a>, просто используйте это:

<a href="javascript:myJSFunc();" />myLink</a>

Лично я бы привязал обработчик событий с помощью JavaScript позже (используя attachEvent или addEventListener или, возможно, также разместил вашу любимую фреймворк JavaScript здесь).

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

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

Не упускайте из виду тот факт, что ваш URL может быть необходим - onclick запускается до того, как будет выполнена ссылка, поэтому иногда вам нужно обработать что-то clientide перед тем, как перейти с страницы.

Вы не должны использовать inline onclick="something();" в своем HTML, чтобы не покрывать его бессмысленным кодом; все привязки кликов должны быть установлены в файлах Javascript (*.js).

Установите привязку следующим образом: $('#myAnchor').click(function(){... **return false**;}); или $('#myAnchor').bind('click', function(){... **return false**;});

Затем у вас есть чистый HTML файл, который легко загрузить (и seo-friendly) без тысяч href="javascript:void(0);" и просто href="#"

Я очень предпочитаю как можно больше убрать свой JavaScript из своей HTML-разметки. Если я использую <a> в качестве обработчиков событий кликов, я бы рекомендовал использовать <a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Очень важно отметить, что многие разработчики считают, что использование тегов привязки для обработчиков событий щелчка не очень хорошо. Они предпочли бы использовать <span> или <div> с некоторым CSS, который добавляет к нему cursor: pointer;. Это вопрос большого обсуждения.

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

Намного лучше связать событие 'onload'a или $ (' document '). Ready {}; затем поместить JavaScript непосредственно в событие click.

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

Как я понимаю, вот несколько jQuery, которые могут помочь:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

Если вы используете ссылку как способ просто выполнить код JavaScript (вместо того, чтобы использовать расширенный диапазон, например D4V360), просто выполните:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Если вы используете ссылку с onclick для навигации, не используйте href= "#" в качестве резервной копии, когда JavaScript отключен. Обычно это раздражает, когда пользователь нажимает на ссылку. Вместо этого предоставите ту же ссылку, которую обработчик onclick предоставит, если это возможно. Если вы не можете этого сделать, пропустите onclick и просто используйте URI JavaScript в href.

На современном веб-сайте следует избегать использования href, если элемент выполняет только функции JavaScript (а не настоящую ссылку).

Зачем? Наличие этого элемента говорит браузеру, что это ссылка с пунктом назначения. При этом браузер покажет функцию "Открыть в новой вкладке/окне" (также срабатывает при нажатии клавиш Shift + щелчок). Это приведет к открытию той же страницы без запуска нужной функции (что приведет к разочарованию пользователя).

Что касается IE: Начиная с IE8, стиль элемента (включая наведение) работает, если задан тип документа. Другие версии IE больше не о чем беспокоиться.

Единственный недостаток: удаление HREF приводит к удалению tabindex. Чтобы преодолеть это, вы можете использовать кнопку в стиле ссылки или добавить атрибут tabindex с помощью JS.

Вот еще один вариант для полноты, который препятствует тому, чтобы ссылка ничего не делала, даже если JavaScript отключен, и это коротко:)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

Если идентификатор отсутствует на странице, ссылка не сделает ничего.

В целом, я согласен с ответом Аарона Вагнера, ссылка JavaScript должна быть введена в документ JavaScript.

Отредактировано 2019 января

В HTML5 допустимо использование элемента без атрибута href. Он считается "гиперссылкой-заполнителем"

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

Пример:

<a>previous</a>

Если после этого вы хотите сделать иначе:

1. Если ваша ссылка никуда не ведет, не используйте элемент <a>. Используйте <span> или что-то еще подходящее и добавьте CSS :hover чтобы придать ему стиль.

2 - Использовать javascript:void(0) ИЛИ javascript:undefined ИЛИ javascript:; если хочешь быть сырым, точным и быстрым.

У вас рассмотрено использование Button с типом = "button"?
Потому что это семантический правильный тег для использования в этом случае +, вы не сталкиваетесь с проблемами SEO-мудрый;)

Вы также можете использовать библиотеку маршрутов javascript.

Модификации Bootstrap начиная с версии 4.0 имеют в основном недокументированное поведение, что они будут загружать элементы href из a, используя AJAX, если они не являются точно #. Если вы используете Bootstrap 3, javascript:void(0); hrefs вызовет ошибки JavaScript:

AJAX Error: error GET javascript:void(0);

В этих случаях вам нужно перейти на bootstrap 4 или изменить href.

иногда мы контролируем ссылки для запуска запросов Ajax, это часто происходит по причинам SEO:

<nav id="sampleId">
    <li><a href="contact">contact</a></li>
    <li><a href="about">about</a></li>
    <li><a href="faq">faq</a></li>
</nav>

нам нужно загружать страницы с помощью Ajax, мы также хотим, чтобы ссылки работали как обычная ссылка с средними щелчками мыши:

// js :
$('#sampleId > li').click(function(e) {

    // if not left click act like normal link :
    if (e.which != 1) return true;

    // else :
    // do some stuff :
    myFunction();
    return false; // this will prevent from going to target href;
})