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

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

javascript void

1734280 просмотра

15 ответа

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

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

Автор: omg Источник Размещён: 12.11.2019 09:55

Ответы (15)


968 плюса

Решение

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

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

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

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

Автор: rahul Размещён: 18.08.2009 05:23

420 плюса

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

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

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

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

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

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

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

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

Автор: bobince Размещён: 18.08.2009 10:50

120 плюса

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

Вы должны на самом деле просто 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>
Автор: Noon Silk Размещён: 18.08.2009 05:21

69 плюса

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

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

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

Автор: Salvin Francis Размещён: 18.08.2009 08:25

58 плюса

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

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

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

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

Автор: Huy - Vuong Do Thanh Размещён: 14.01.2014 07:17

43 плюса

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

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

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

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

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

Автор: jscharf Размещён: 18.08.2009 05:25

22 плюса

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

Например:

something === undefined

против

something === void 0

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

Автор: Squall Размещён: 10.11.2016 06:32

16 плюса

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>
Автор: Amr Размещён: 15.03.2012 07:34

15 плюса

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

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

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

Автор: Ron Royston Размещён: 04.10.2017 10:43

15 плюса

Чтобы понять эту концепцию, сначала нужно понять оператор 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/")
Автор: Gopal Yadav Размещён: 02.08.2016 09:16

14 плюса

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

Автор: Abhay Singh Размещён: 24.07.2013 01:47

6 плюса

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

Автор: user4914655 Размещён: 28.04.2018 06:12

6 плюса

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

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

Автор: Mohamad Shiralizadeh Размещён: 21.08.2018 05:13

0 плюса

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
}
Автор: Maciej Krawczyk Размещён: 07.12.2017 06:30

-2 плюса

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

Автор: Mile Mijatovic Размещён: 30.12.2016 01:00
Вопросы из категории :
32x32