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

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

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

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

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

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

Недостатком этого является то, что вы теряете управление клавиатурой, так как вы не можете вставлять в span/div/bare-a или активировать его с пространством. Независимо от того, является ли это на самом деле недостатком, зависит от того, какое действие элемент должен предпринять. Вы можете с некоторым усилием попытаться имитировать взаимодействие с клавиатурой, добавив к элементу элемент tabIndex и прослушав нажатие клавиши Space. Но на 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

something === undefined

против.

something === void 0

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

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

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

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

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

function myVoid(expr) {
    return undefined;
}

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

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

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

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

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

Источник: MDN <a>.

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

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

<A HREF="" 

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

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

поскольку тег HREF в большинстве браузеров не допускает пробелов или преобразует пробелы в %20, HEX равнозначен пробелу, что делает ваш JavaScript абсолютно бесполезным для интерпретатора.

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

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

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</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: недействительным (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:void(0), потому что это самый простой способ, чтобы предотвратить поведение по умолчанию a теге. void(*anything*) возвращает undefined и это ложное значение. и возвращает falsy значение, как return false в onclick случае a тегом, которые препятствуют его поведение по умолчанию.

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

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 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). Я не уверен, правильно ли это, но выполняет ли работа

$(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>