Что означает "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 ссылки, что обычно javascript: URL перенаправит браузер на текстовую версию результата оценки этого JavaScript. Но если результат undefined затем браузер остается на той же странице. void(0) это просто короткий и простой скрипт, который оценивает undefined,

Answer 2

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

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

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

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

"#" прокручивает вас в верхнюю часть страницы, а "javascript:void(0);" не.

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

Answer 6

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

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

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

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

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

Answer 7

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

Например:

something === undefined

против

something === void 0

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

Answer 8

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

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

Источник: МДН <a> Страница

Answer 9

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

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

Answer 10

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>

Answer 11

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

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

<A HREF="" 

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

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

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

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

Answer 12

Чтобы понять эту концепцию, сначала нужно понять оператор 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/")

Answer 13

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

Answer 14

Из того, что я видел, оператор имеет 3 общих применения в JavaScript. Тот, о котором вы говорите, <a href="javascript:void(0)">- это распространенный прием, позволяющий запретить использование тега. Некоторые браузеры лечат <a> теги по-разному в зависимости от того, есть ли у них href это ничего не делает.

В voidОператор - это унарный оператор, который принимает аргумент и возвращает его. Так var x = void 42; средства x === undefined. Это полезно, потому что вне строгого режима это действительное имя переменной. Поэтому некоторые разработчики JavaScript используют void 0 вместо undefined. Теоретически вы также можете сделать <a href="javascript:undefined"> и это будет то же самое, что и void(0).

Answer 15

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 16

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