Что означает “javascript:void(0)”?

Question

<a href="javascript:void(0)" id="loginlink">login</a>

Я видел такое hrefэто много раз, но я не знаю, что именно это значит.

Answer 1

В void оператор вычисляет заданное выражение, а затем возвращает undefined.

В void оператор часто используется просто для получения undefined примитивный значение, обычно использующее “void(0)” (что эквивалентно “void 0”).В этих случаях глобальная переменная undefined может использоваться вместо (при условии, что ему не было присвоено значение, отличное от значения по умолчанию ).

Объяснение приводится здесь: void оператор.

Причина, по которой вы хотели бы сделать это с href ссылки заключается в том, что обычно, a javascript: URL перенаправит браузер на обычную текстовую версию результата вычисления этого JavaScript.Но если результат будет undefined, тогда браузер останется на той же странице. void(0) это всего лишь короткий и простой скрипт, который вычисляет undefined.

Answer 2

В дополнение к техническому ответу, javascript:void означает, что автор делает Это Неправильно.

Нет веских причин использовать javascript: псевдо-URL(*).На практике это вызовет путаницу или ошибки, если кто-нибудь попробует использовать такие вещи, как ‘ссылка в закладке", "открыть ссылку на новой вкладке’ и так далее.Это происходит довольно часто, теперь люди привыкли к среднему щелчку для новой вкладки:это выглядит как ссылка, вы хотите прочитать ее на новой вкладке, но оказывается, что это вообще не настоящая ссылка и она выдает нежелательные результаты, такие как пустая страница или ошибка JS при среднем нажатии.

<a href="#"> это распространенная альтернатива, которая, возможно, была бы менее плохой.Однако вы должны помнить, что return false от вашего onclick обработчик событий для предотвращения перехода по ссылке и прокрутки до верха страницы.

В некоторых случаях может найтись действительно полезное место, на которое можно указать ссылку.Например, если у вас есть элемент управления, по которому вы можете щелкнуть, чтобы открыть ранее скрытый <div id="foo">, имеет некоторый смысл использовать <a href="#foo"> чтобы ссылаться на него.Или, если есть не-JavaScript способ сделать то же самое (например, ‘thispage.php?show=foo’, который устанавливает foo visible для начала), вы можете сослаться на это.

В противном случае, если ссылка указывает только на какой-то скрипт, на самом деле это не ссылка и ее не следует помечать как таковую.Обычный подход состоял бы в том, чтобы добавить onclick к a <span>, <div>, или <a> без href и оформите его каким-нибудь образом, чтобы было ясно, что вы можете нажать на него.Это то, что StackOverflow [делал на момент написания;теперь он использует href="#"].

Недостатком этого является то, что вы теряете управление клавиатурой, поскольку вы не можете перейти на вкладку span / div / bare-a или активировать ее с помощью пробела.Является ли это на самом деле недостатком, зависит от того, какого рода действие предназначен выполнять элемент.Вы можете, приложив некоторые усилия, попытаться имитировать взаимодействие с клавиатурой, добавив tabIndex к элементу и прослушивает нажатие клавиши Пробела.Но это никогда не будет на 100% воспроизводить реальное поведение браузера, не в последнюю очередь потому, что разные браузеры могут по-разному реагировать на клавиатуру (не говоря уже о невизуальных браузерах).

Если вам действительно нужен элемент, который не является ссылкой, но который можно активировать обычным способом с помощью мыши или клавиатуры, то вам нужен <button type="button"> (или <input type="button"> так же хорош для простого текстового содержимого).Вы всегда можете использовать CSS для изменения стиля, чтобы он больше походил на ссылку, чем на кнопку, если хотите.Но поскольку он ведет себя как кнопка, именно так на самом деле вы должны его пометить.

(*:во всяком случае, при разработке сайта.Очевидно, что они полезны для букмарклетов. javascript: псевдо-URL-адреса - это концептуальная причуда:локатор, который не указывает на местоположение, но вместо этого вызывает активный код внутри текущего местоположения.Они вызвали огромные проблемы с безопасностью как для браузеров, так и для веб-приложений, и Netscape никогда не следовало их изобретать.)

Answer 3

Это значит, что это ничего не даст.Это попытка сделать так, чтобы ссылка никуда не ‘перемещалась’.Но это неправильный путь.

На самом деле вам следует просто return false в onclick событие, вот так:

<a href="#" onclick="return false;">hello</a>

Обычно это используется, если ссылка выполняет какую-то ‘JavaScript-y’-функцию.Например, опубликовать форму AJAX, или поменять местами изображение, или что-то еще.В этом случае вы просто возвращаете любую вызываемую функцию false.

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

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

Answer 4

Существует ОГРОМНАЯ разница в поведении "#" по сравнению с javascript:void

"#" прокручивает вас к НАЧАЛУ страницы в то время как "javascript:void(0);" этого не делает.

Это очень важно, если вы кодируете динамические страницы.пользователь не хочет возвращаться в топ только потому, что он нажал на ссылку на странице.

Answer 5

Это очень популярный метод добавления функций JavaScript к HTML-ссылкам.
Например:в [Print] ссылки, которые вы видите на многих веб-страницах, написаны следующим образом:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Зачем нам нужно href в то время как onclick в одиночку можно выполнить эту работу?Потому что, когда пользователи наводят курсор на текст "Печать", когда нет href, курсор изменится на каретку (ꕯ) вместо указателя (👆).Только имея href на одном a тег проверяет его как гиперссылку.

Альтернативой href="javascript:void(0);", заключается в использовании href="#".Эта альтернатива не требует включения JavaScript в браузере пользователя, поэтому она более совместима.

Answer 6

У вас всегда должна быть ссылка на ваш a Теги.Вызов функции JavaScript, которая возвращает 'undefined', подойдет просто отлично.Так же будет и ссылка на '#'.

Теги привязки в Internet Explorer 6 без href не получают a:hover примененный стиль.

Да, это ужасное и незначительное преступление против человечности, но опять же, как и Internet Explorer 6 в целом.

Я надеюсь, что это поможет.

Internet Explorer 6 на самом деле является серьезным преступлением против человечности.

Answer 7

Стоит упомянуть, что иногда вы будете видеть void 0 при проверке на undefined, просто потому, что для этого требуется меньше символов.

Например:

something === undefined

против.

something === void 0

По этой причине некоторые методы минимизации заменяют undefined на void 0.

Answer 8

void является оператором, который используется для возврата undefined значение, чтобы браузер не смог загрузить новую страницу.

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

<a href="javascript: alert('Hello World')">Click Me</a>

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

Важно отметить, что для оператора void требуется значение, и он не может использоваться сам по себе.Мы должны использовать это следующим образом:

<a href="javascript: void(0)">I am a useless link</a>

Answer 9

Чтобы понять эту концепцию, нужно сначала разобраться с оператором void в JavaScript.

Синтаксис для оператора void следующий: void «expr» который вычисляет expr и возвращает undefined .

Если вы реализуете void как функцию, это выглядит следующим образом:

function myVoid(expr) {
    return undefined;
}

Этот оператор void имеет одно важное применение, которое заключается в отбрасывании результата выражения.

В некоторых ситуациях важно возвращать undefined в отличие от результата выражения.Затем void можно использовать для удаления этого результата.Одна из таких ситуаций связана с javascript:URL-адреса, которых следует избегать для ссылок, но которые полезны для букмарклетов.Когда вы посещаете один из этих URL-адресов, многие браузеры заменяют текущий документ результатом оценки URL-адресов “content”, но только если результат не является неопределенным.Следовательно, если вы хотите открыть новое окно без изменения текущего отображаемого содержимого, вы можете сделать следующее:

javascript:void window.open("http://example.com/")

Answer 10

В void оператор вычисляет заданное выражение, а затем возвращает undefined .Это позволяет избежать обновления страницы.

Answer 11

Использование javascript:void(0) означает, что автор HTML-кода неправильно использует элемент привязки вместо элемента button.

С помощью события onclick часто злоупотребляют тегами привязки для создания псевдокнопок, устанавливая для href значение "#" или "javascript:void(0)", чтобы запретить обновление страницы.Эти значения приводят к неожиданному поведению при копировании / перетаскивании ссылок, открытии ссылок в новых вкладках / окнах, закладках и когда JavaScript все еще загружается, выдает ошибки или отключен.Это также передает неверную семантику вспомогательным технологиям (например, программам чтения с экрана).В этих случаях рекомендуется использовать <button> вместо этого.В общем, вы должны использовать только привязку для навигации, используя правильный URL.

Источник: MDN's <a> Страница.

Answer 12

Ссылка должна иметь целевой параметр HREF, который должен быть указан, чтобы она могла быть полезным отображаемым объектом.

Большинство браузеров не будут анализировать расширенный JavaScript в

<A HREF="" 

тег, такой как:

<A href="JavaScript:var elem = document.getElementById('foo');" 

поскольку тег HREF в большинстве браузеров не допускает пробелов или преобразует пробелы в %20, шестнадцатеричный эквивалент ПРОБЕЛА, что делает ваш JavaScript абсолютно бесполезным для интерпретатора.

Поэтому, если вы хотите использовать тег A HREF для выполнения встроенного JavaScript, вы должны сначала указать допустимое значение для HREF, которое не является слишком сложным (не содержит пробелов), а затем предоставить JavaScript в теге атрибута события, таком как OnClick, OnMouseOver, OnMouseOut и т.д.

Типичный ответ - сделать что-то вроде этого:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

Это работает нормально, но это заставляет страницу подняться наверх, потому что знак фунта / хэш-тег сообщает ей об этом.

Простое указание знака фунта / хэш-тега в теге A HREF фактически указывает корневую привязку, которая по умолчанию всегда находится в верхней части страницы. Вы можете указать другое местоположение, указав атрибут NAME внутри тега A HREF.

<A NAME='middleofpage'></A>

Затем вы можете изменить свой тег A HREF, чтобы перейти к "middleofpage" и выполнить JavaScript в событии OnClick, как только это произойдет следующим образом:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

Будет МНОГО случаев, когда вы не захотите, чтобы эта ссылка прыгала по кругу, поэтому вы можете сделать две вещи:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

Теперь он никуда не денется при нажатии, но это может привести к тому, что страница переместится из текущего окна просмотра.Это некрасиво.Каков наилучший способ предоставить встроенный javascript, используя A HREF, но без необходимости выполнять что-либо из вышеперечисленного?JavaScript:void(0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

Это указывает браузеру НИКУДА не уходить, но вместо этого выполняет действительный JavaScript:void(0);используйте сначала тег HREF, потому что он не содержит пробелов и не будет проанализирован как URL.Вместо этого он будет запущен компилятором.VOID - это ключевое слово, которое при задании параметра 0 возвращает значение UNDEFINED, которое больше не использует ресурсы для обработки возвращаемого значения, которое возникло бы без указания 0 (это более удобно для управления памятью / производительности).

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

Answer 13

Веб-разработчики используют javascript:void(0) потому что это самый простой способ предотвратить поведение по умолчанию a пометка. void(*anything*) ВОЗВРАТ undefined и это ложное значение.и возвращать ложное значение - это как return false в onclick событие из a тег, который предотвращает его поведение по умолчанию.

Так что я думаю javascript:void(0) это самый простой способ предотвратить поведение по умолчанию a пометка.

Answer 14

JavaScript:URL-адреса в сторону;именно здесь void может быть полезен для написания более короткого кода.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}

Answer 15

Другой пример, где используется javascript.void(0) .Я не уверен, правильный ли это способ, но выполняет свою работу

$(document).ready(function() {
  jQuery(".show-hide-detail").hide();
  jQuery(".show-hide-detail:first").show();
  jQuery(".show-hide-btn a").click(function() {
    var thid_data = jQuery(this).attr('data-id');
    jQuery(".show-hide-btn a").removeClass('active');
    jQuery(this).addClass('active');
    if (!jQuery("#" + thid_data).is(":visible")) {
      jQuery(".show-hide-detail").hide();
      jQuery("#" + thid_data).show();
    }
  });
});

<section>
  <div class="features">
    <div class="container">
      <h1>Room Dimensions</h1>
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna
      </p>
      <div class="dimension-btn show-hide-btn">
        <a class="active" data-id="LivingRoom">Living Room</a>
        <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a>
        <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a>
        <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a>
        <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a>
        <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a>
        <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a>
        <a href="javascript:void(0)" data-id="Gym">Gym</a>
        <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a>
      </div>
      <div class="row">
        <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div>
        <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div>
        </div>
      </div>
    </div>



</section>