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

Ниже приведены два метода создания ссылки, единственной целью которой является выполнение кода JavaScript. Что лучше с точки зрения функциональности, скорости загрузки страницы, целей проверки и т. Д.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

или

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Ответы [ 53 ]

22 голосов
/ 26 января 2016

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

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

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

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

И стиль с CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
20 голосов
/ 26 июля 2013

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

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

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

Дополнительно

  • Это не приведет вас к началу страницы, как с (#)
    • Следовательно, вам не нужно явно возвращать false с JavaScript
  • Это краткое лаконичное
19 голосов
/ 16 октября 2008

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

18 голосов
/ 29 июня 2013

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

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

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

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

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

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

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

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

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

16 голосов
/ 29 октября 2016

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

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

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

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

16 голосов
/ 25 июня 2012

Когда у меня есть несколько поддельных ссылок, я предпочитаю указывать им класс 'no-link'.

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

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

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

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

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 пример вышеупомянутого.

...