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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

существует огромная разница в поведении " # " против javascript: void

"#" прокручивает вас в верхней части страницы в то время как" javascript:void(0); " не делает.

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

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

<a href="javascript:void(0)" onclick="call print function">Print</a>

зачем это нужно 'href' пока 'onclick' в одиночку может получить работу? Потому что если мы опустим 'href', когда пользователи наведут курсор мыши на текст "печать", курсор изменится на"I". Имея 'href' разрешить отображение курсора, как если бы это была гиперссылка: указывающая рука.

PS: существует два метода: 1. href="javascript:void(0);" и 2. href="#" - оба имеют одинаковый эффект. Но 1-й требует, чтобы JavaScript был включен в веб-браузере, а второй-нет. Так что вторая, кажется, более совместима.

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

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

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

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

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

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

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

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

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

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

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

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

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

например:

something === undefined

и

something === void 0

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

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

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

источник: МДН-х <a> страница.

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

синтаксис оператора void:void «expr» который оценивает expr и возвращает undefined.

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

function myVoid(expr) {
    return undefined;
}

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

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

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

ссылка должна иметь цель 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>

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

JavaScript: URLs в сторону; здесь 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
}

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

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

другой пример, где используется 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>