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

вопрос задан 25.09.2008
2cBGj7vsfp
1372 репутация

50 ответов


  • 2020 рейтинг

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

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

    ответ дан AnthonyWJones, с репутацией 160565, 26.09.2008
  • 1213 рейтинг

    Ни.

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

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

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

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

    ответ дан Aaron Wagner, с репутацией 5279, 25.09.2008
  • 742 рейтинг

    Выполнение <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> 

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

    ответ дан balupton, с репутацией 30540, 25.02.2012
  • 282 рейтинг

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

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

    ответ дан Adam Tuttle, с репутацией 11703, 25.09.2008
  • 217 рейтинг

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


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

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

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

    ответ дан Tracker1, с репутацией 13717, 15.12.2011
  • 129 рейтинг

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

    ответ дан Zach, с репутацией 17925, 25.09.2008
  • 91 рейтинг

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

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

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

    ответ дан Steve Paulo, с репутацией 15479, 25.09.2008
  • 87 рейтинг

    И если вы спросите меня;

    Если ваша «ссылка» имеет единственную цель для запуска какого-либо кода JavaScript, она не квалифицируется как ссылка; скорее часть текста с функцией JavaScript, связанной с ней. Я бы рекомендовал использовать <span> тег с onclick handler прикрепленными к нему и некоторым основным CSS для immitate ссылки. Ссылки сделаны для навигации, и если ваш код 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> 

    ответ дан fijter, с репутацией 15263, 25.09.2008
  • 74 рейтинг

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

    ответ дан Spammer Joe, с репутацией 41, 24.09.2011
  • 57 рейтинг

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

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

    вместо

     <a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
     
    ответ дан se_pavel, с репутацией 1444, 17.04.2009
  • 51 рейтинг

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

    ответ дан Fczbkk, с репутацией 1223, 27.09.2008
  • 49 рейтинг

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

    ответ дан Justin Johnson, с репутацией 26594, 23.11.2009
  • 37 рейтинг

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

    ответ дан Simon Forrest, с репутацией 2269, 25.09.2008
  • 35 рейтинг

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

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

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

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

    ответ дан Free Consulting, с репутацией 3283, 7.11.2009
  • 35 рейтинг

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

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

    ответ дан phyzome, с репутацией 2013, 16.10.2008
  • 30 рейтинг

    Я обычно хожу

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

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

    ответ дан dnetix, с репутацией 171, 13.08.2015
  • 27 рейтинг

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

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

    Причины:

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

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

    ответ дан user564706, с репутацией 23, 26.07.2011
  • 23 рейтинг

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


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

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

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

    ответ дан Ashish Kumar, с репутацией 2583, 13.02.2014
  • 22 рейтинг

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

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

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

    Обозначение метки привязки будет похоже на

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

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

    ответ дан naveen, с репутацией 36284, 23.10.2008
  • 21 рейтинг

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

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

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

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

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

     .funcActuator { 
      cursor: default;
    }
    
    .funcActuator:hover { 
      color: #900;
    }
     
    ответ дан Garrett, с репутацией 2287, 26.01.2016
  • 20 рейтинг

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

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

    Который ничего не сделает.

    К тому же

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

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

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

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

    ответ дан achairapart, с репутацией 1969, 29.06.2013
  • 18 рейтинг

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

    ответ дан Andrew Moore, с репутацией 74112, 16.10.2008
  • 17 рейтинг

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

    ответ дан Garrett, с репутацией 2287, 29.10.2016
  • 16 рейтинг

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

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

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

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

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

    ответ дан Will Read, с репутацией 39, 25.09.2008
  • 16 рейтинг

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

    ответ дан Stacks on Stacks on Stacks, с репутацией 63, 25.06.2012
  • 15 рейтинг

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

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

    ответ дан Clever Human, с репутацией 6030, 25.09.2008
  • 13 рейтинг

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

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

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

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

    ответ дан Anders M., с репутацией 121, 20.03.2014
  • 10 рейтинг

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

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

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

    ответ дан Matt Goddard, с репутацией 797, 28.02.2009
  • 10 рейтинг

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

    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() {
                ... code to execute ...
            });
        })(jQuery);
    </script>
     

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

     $('.link').on('click', function() {
        ... code to execute ...
    });
     

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

     $(document).on('click','.link', function() {
        ... code to execute ...
    });
     

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

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

    Ниже приведен пример jsFiddle выше.

    ответ дан mdesdev, с репутацией 5040, 26.04.2014
  • 10 рейтинг

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

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

    ответ дан mmacaulay, с репутацией 2467, 25.09.2008
  • 9 рейтинг

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

    ответ дан dazbradbury, с репутацией 4675, 16.03.2012
  • 8 рейтинг

    Вы можете использовать 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
    
    });
     
    ответ дан vol7ron, с репутацией 23684, 22.08.2012
  • 8 рейтинг

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

    ответ дан rcof, с репутацией 26, 27.12.2010
  • 8 рейтинг

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

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

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

    ответ дан Vinny Fonseca, с репутацией 425, 7.03.2014
  • 7 рейтинг

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

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

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

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

    Aand, если 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>')
    });
     
    ответ дан Berker Yüceer, с репутацией 2871, 15.12.2011
  • 6 рейтинг

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

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

    ответ дан Peter, с репутацией 5786, 25.09.2008
  • 6 рейтинг

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

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

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

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

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

    Pros

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

    Cons

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

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

    ответ дан user394888, с репутацией 1, 17.07.2010
  • 6 рейтинг

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

     <span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
     
    ответ дан AlxGol, с репутацией 111, 18.11.2014
  • 6 рейтинг

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

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

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

    ответ дан Pablo Cabrera, с репутацией 4734, 26.09.2008
  • 6 рейтинг

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

    ответ дан nathaniel, с репутацией 1041, 25.09.2008
  • 5 рейтинг

    Просто чтобы понять, что некоторые из них упомянули.

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

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

    Поскольку у меня есть это в руках, вот несколько jQuery, которые могут помочь:

     var [functionName] = function() {
    };
    
    jQuery("[link id or other selector]").bind("click", [functionName]);
     
    ответ дан Matt Goddard, с репутацией 797, 23.10.2008
  • 5 рейтинг

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

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

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

    ответ дан Shadow2531, с репутацией 10293, 25.09.2008
  • 5 рейтинг

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

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

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

    ответ дан Jesse Atkinson, с репутацией 2947, 14.12.2011
  • 5 рейтинг

    Вы не должны использовать 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="#"

    ответ дан G. Ghez, с репутацией 2128, 8.02.2013
  • 3 рейтинг

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

    Зачем? Большинство страниц так сильно зависят от JavaScript, что они просто не работают без JS. Кроме того, данные резервные копии (href to "", "#" или "js .. (void)) не добавляют никакой пользы, кроме добавления функции открытия в новую вкладку, которая снова откроет ту же страницу без намеченной функции.

    Учитывая все эти недостатки без реальной выгоды, использование href в не-ссылке является плохой практикой.

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

    ответ дан djpalme, с репутацией 420, 26.03.2017
  • 2 рейтинг

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

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

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

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

    ответ дан Timo Huovinen, с репутацией 30950, 15.03.2012
  • -3 рейтинг

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

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

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

    ответ дан Charlie, с репутацией 4375, 4.10.2017