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

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

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

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

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

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

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

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

( * : в разработке сайта, во всяком случае. Очевидно, что они полезны для букмарклетов. javascript: псевдо-url-это концептуальная странность: локатор, который не указывает на местоположение, а вместо этого вызывает активный код внутри текущего местоположения. Они вызвали огромные проблемы безопасности как для браузеров, так и для веб-приложений, и никогда не должны были быть изобретены 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="#" - оба имеют одинаковый эффект. Но первый требует, чтобы JavaScript был включен в веб-браузере, а второй-нет. Так что второй кажется более совместимым.

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

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

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

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

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

void - это оператор, который используется для возврата a 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 в отличие от результата выражения. Тогда пустота может быть использован, чтобы отменить результат. Одна из таких ситуаций связана с 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: 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
}

веб-разработчики используют 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>