javascript - ссылке - заглушка на ссылку




Какое значение «href» следует использовать для ссылок на JavaScript, «#» или «javascript: void(0)»? (20)

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


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

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

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

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

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

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


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

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

Или, что еще лучше, у вас была бы ссылка на действие по умолчанию в HTML, и вы добавили бы событие onclick к элементу ненавязчиво через JavaScript после DOM-рендеринга, тем самым гарантировав, что если 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>

Пример Blackbed Backbone.js

Для масштабируемого, чернокожего компонента компонента Backbone.js - см. Здесь рабочий пример jsfiddle . Обратите внимание на то, как мы используем ненавязчивые методы работы с JavaScript, а в небольшом количестве кода есть компонент, который может повторяться на странице несколько раз без побочных эффектов или конфликтов между различными экземплярами компонентов. Удивительно!

Заметки

  • Опущение атрибута href a элемента a приведет к тому, что элемент не будет доступен с помощью навигации по клавише tab . Если вы хотите, чтобы эти элементы были доступны с помощью клавиши tab , вы можете установить атрибут tabindex или использовать элементы button . Вы можете легко стилизовать элементы кнопок, чтобы они выглядели как обычные ссылки, как указано в ответе Tracker1 .

  • Опущение атрибута href a элемента a приведет к тому, что Internet Explorer 6 и Internet Explorer 7 не будут a:hover стиль a:hover , поэтому мы добавили простой JavaScript-прокладку, чтобы выполнить это с помощью a.hover . Что совершенно нормально, как будто у вас нет атрибута href и нет изящного деградации, тогда ваша ссылка не будет работать в любом случае - и у вас появятся более серьезные проблемы.

  • Если вы хотите, чтобы ваши действия по-прежнему работали с отключенным JavaScript, используйте элемент с атрибутом href который отправляется на какой-то URL-адрес, который будет выполнять действие вручную, а не через запрос Ajax или что-то еще должно быть. Если вы делаете это, то вы хотите, чтобы вы делали event.preventDefault() в своем вызове, чтобы убедиться, что при нажатии кнопки он не следует по ссылке. Этот параметр называется грациозным деградации.


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


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


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

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


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

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

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

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


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

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

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

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

См. Здесь https://.com/a/45465728/2803344


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


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

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


Я обычно хожу

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

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


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


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

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


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


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


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

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

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

К тому же

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

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

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

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


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

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







href