2009-08-18 19 views
936
<a href="javascript:void(0)" id="loginlink">login</a> 

Много раз я видел такие href, но я не знаю, что именно это означает.Что означает «javascript: void (0)»?

+3

'javascript:' является одной из многих схем URI: http://en.wikipedia.org/wiki/URI_scheme, как 'data:'. –

+3

Вы можете использовать только 'href =" javascript: "' для этой же цели. Как указано в ответе на [этот вопрос] (http://stackoverflow.com/q/5237105/3075942), часть 'void (0)' изначально предназначалась для ранних версий браузеров, где 'javascript:' обработка URI была другой. Но теперь я даже не мог найти версию, где стенография не работала, по крайней мере IE7 справляется с этим правильно. – user

+1

Я также видел href = "javascript: //", это лучше? – StarWars

ответ

724

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

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

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

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

+3

what does it mean when href is given a "undefined primitive value"? – omg

+4

"normally a javascript: url will redirect the browser to a plain text version of the result of evaluating that javascript. " Can you make an example here?I've never seen such usage. – omg

+0

javascript: 1+1; – Breton

96

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

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

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

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

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

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

href = "#" добавит «#» к URL-адресу, что является уродливым. – omg

+0

Он не только добавляет # к URL-адресу, но также делает фокус в верхней части формы. – rahul

+0

, поэтому использовать «#» не рекомендуется. – omg

34

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

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

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

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

Интернет   Проводник   6 на самом деле является крупным преступлением против человечества.

55

Существует огромная разница в поведении «#» против JavaScript: недействительным

«#» свитки вас к вершине страницы в то время как «JavaScript: недействительным (0);» не.

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

+19

@Salvin: поведение * scroll-to-top-of-page * может быть подавлено возвратом 'false' обработчику событий:' onclick = "doSomething() ; return false; ", или если' doSomething() 'возвращает' false', вы можете использовать 'onclick = 'return doSomething();". –

+25

@GrantWagner - Или, через 5 лет, 'e.preventDefault()'. – trysis

+1

Возможно, вы захотите отредактировать/удалить этот ответ, так как '' # "' does * not * прокручивается вверх, когда вы возвращаете false. – Navin

352

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

Нет веских оснований для использования псевдо-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 к элементу и прослушав нажатие клавиши Space. Но на 100% не воспроизводится реальное поведение браузера, не в последнюю очередь потому, что разные браузеры могут реагировать на клавиатуру по-разному (не говоря уже о невизуальных браузерах).

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

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

+7

В дополнение к отличному сообщению от @bobince: несколько месяцев назад я провел несколько исследований по кросс-браузерной клавиатуре навигации «href's», включая причуды и побочные эффекты; некоторые из вас могут найти это полезным: http://jakub-g.github.com/accessibility/onclick/ –

+1

Спасибо, это полезно.Тем не менее, я только что добавил комментарий, и хотя они используют классы и идентификаторы, они также имеют add comment ThinkBonobo

+2

@ThinkBonobo: SO изменился в какой-то момент с 2009 года! Обновлено. – bobince

13

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

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

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

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

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

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

Я видел, как люди используют javascript: null вместо void .. но это проблема. Chrome null работает, в Firefox он пытается загрузить страницу null. Рад, что вы обновили. Интересная ошибка. –

+0

Я нашел несколько других применений в кодовой базе, такой как javascript: null, но с javascript: null(), которая не определена, поэтому работает. –

+0

Так в основном это как jquery's prevendDefault и возвращает false? –

13

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

44

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

+4

не делает ничего полезного, если javascript отключен. – Jasen

+3

Вам не нужно 'href', чтобы получить указательный указатель руки; все, что требуется, это немного CSS. –

7

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

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

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

оператор
function myVoid(expr) { 
    return undefined; 
} 

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

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

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

Спасибо, что разъяснил, для чего нужен аргумент «void»! В других ответах было неясно, только «пустота принимает аргумент». – dbeachy1

11

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

Например:

something === undefined 

против

something === void 0 

Некоторые методы минификация заменить неопределенными с недействительными 0 по этой причине.

+3

Одним из примечательных примеров является TypeScript ([live example] (http://www.typescriptlang.org/play/#src=function%20fn (значение% 3A% 20number% 20% 3D% 207)% 20% 7B% 0D% 0A% 20% 20% 20% 20return% 20value% 20 *% 202% 3B% 0D% 0A% 7D)), который компилирует значения параметров по умолчанию для проверки на 'void 0'. Разница в 3 символа складывается быстро, когда множество методов использует значения параметров по умолчанию. –

-1

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

8

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

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

MDN's <a> Page.

+1

+1 для воспитания семантического html по старому вопросу ... Ссылки идут местами, кнопки делают вещи - если мы не хотим, чтобы это выглядело как кнопка, мы должны просто очистить стиль. – kevlarr

-1

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

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 
} 
Смежные вопросы