web-dev-qa-db-ja.com

"javascript:void(0)"はどういう意味ですか?

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

私はそのようなhrefを何度も見ましたが、それがどういう意味なのかわかりません。

1199
omg

void演算子は与えられた式を評価してからundefinedを返します。

void演算子は、単にundefinedプリミティブ値を取得するために使用されることが多く、通常は「void(0)」(「void 0」と同等)を使用します。このような場合は、グローバル変数 undefined を代わりに使用できます(デフォルト以外の値に割り当てられていないと仮定します)。

説明はここにあります: void operator

リンクのhrefでこれを行いたいのは、通常、javascript:のURLがブラウザをそのJavaScriptの評価結果のプレーンテキストバージョンにリダイレクトするためです。しかし、結果がundefinedの場合、ブラウザは同じページに留まります。 void(0)は、undefinedと評価される、短くてシンプルなスクリプトです。

913
rahul

技術的な回答に加えて、javascript:voidは作者がDoing It Wrongであることを意味します。

javascript:擬似URL(*)を使用するのに十分な理由はありません。実際には、「ブックマークリンク」、「新しいタブでリンクを開く」などのことを試みると、混乱やエラーが発生します。これは結構多くの人が新しいタブのためにmiddle-click-to-new-tabに慣れてきました:それはリンクのように見えます、あなたは新しいタブでそれを読みたいです、しかしそれはまったく本当のリンクではないことがわかります、真ん中をクリックすると、空白のページやJSエラーのような不要な結果が得られます。

<a href="#">は、おそらくそれほど悪くないかもしれない一般的な選択肢です。ただし、リンクをたどってページの先頭までスクロールしないようにするには、onclickイベントハンドラからreturn falseを忘れないでください。

場合によっては、リンクを指すのに実際に便利な場所があるかもしれません。たとえば、クリックできるコントロールがある場合は、以前に隠されていた<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は概念的な奇妙さです:場所を指し示すのではなく、現在の場所の中のアクティブなコードを呼び出すロケーターです。ブラウザとWebアプリケーションの両方にセキュリティ上の問題があり、Netscapeによって発明されたことはないはずです。)

405
bobince

何もしないという意味です。リンクをどこにも移動しないようにすることを目的としています。しかし、それは正しい方法ではありません。

onclickイベントでは、実際にはreturn falseだけを使用します。

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

通常、リンクが「JavaScript-y」の機能を実行している場合に使用されます。 AJAXフォームを投稿したり、画像を交換したり、その他何でも。その場合は、呼び出されている関数がなんであれfalseを返すようにします。

あなたのウェブサイトを完全に素晴らしいものにするために、しかしながら、ブラウズしている人がJavaScriptを実行しないことを選択した場合、一般的にあなたは同じ行動をするリンクを含めるでしょう。

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

"#"とjavascriptの動作には大きな違いがあります。void

"#"は "javascript:void(0);"の間、ページのトップにスクロールします。ではない。

動的ページをコーディングしている場合、これは非常に重要です。ユーザーがページ上のリンクをクリックしたからといって、ユーザーが一番上に戻ることを望まないのです。

66
Salvin Francis

これは、JavaScript関数をHTMLリンクに追加するための非常に一般的な方法です。
例えば:あなたが多くのウェブページで見る[Print]リンクはこのように書かれています:

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

hrefだけで作業を完了できるのに、なぜonclickが必要なのですか?なぜなら、_ hrefがないときにユーザーがテキスト 'Print'の上にカーソルを置くと、カーソルがポインタ(????)ではなくキャレット(()に変わるからです。 hrefタグにaを付けるだけで、ハイパーリンクとして検証されます。

href="javascript:void(0);"の代わりにhref="#"を使用することができます。この方法では、ユーザーのブラウザでJavaScriptを有効にする必要がないため、より互換性があります。

54

a タグには常にhrefがあるはずです。 'undefined'を返すJavaScript関数を呼び出しても問題ありません。 '#'にリンクします。

HrefのないInternet Explorer 6のアンカータグには、a:hoverスタイルが適用されません。

はい、それはひどいもので人類に対する軽微な犯罪ですが、やはりInternet Explorer 6一般もそうです。

これが役に立つことを願っています。

Internet Explorer 6は、実際には人道に対する重大な犯罪です。

43
jscharf

未定義の文字をチェックするときに無効な0が表示されることがあるのは、言及する価値があります。単に文字数が少なくて済むからです。

例えば:

something === undefined

vs.

something === void 0

このため、縮小方法の中には、undefinedをvoid 0に置き換えるものがあります。

17
Squall

voidは、ブラウザが新しいページを読み込めないようにするためにundefined値を返すために使用される演算子です。

Webブラウザは、URLとして使用されているものを何でも試して読み込み、それがnullを返すJavaScript関数でない限りそれをロードします。たとえば、次のようなリンクをクリックしたとします。

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

新しいページをロードせずに警告メッセージが表示されるのは、alertがnull値を返す関数であるためです。これは、ブラウザが新しいページを読み込もうとしたときにnullが表示され、何も読み込むことができないことを意味します。

Void演算子について注意すべき重要なことは、それが値を必要とし、単独では使用できないということです。このように使うべきです:

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

この概念を理解するには、まずJavaScriptのvoid演算子を理解する必要があります。

Void演算子の構文は次のとおりです。void «expr»これはexprを評価し、undefinedを返します。

関数としてvoidを実装すると、次のようになります。

function myVoid(expr) {
    return undefined;
}

このvoid演算子には、重要な使い方が1つあります。式の結果を破棄することです。

状況によっては、式の結果とは対照的に、undefinedを返すことが重要です。その結果、voidを使用してその結果を破棄することができます。そのような状況の1つにjavascriptが含まれます。URLはリンクには使用しないでくださいが、ブックマークレットには役立ちます。これらのURLの1つにアクセスすると、多くのブラウザが現在の文書をURLの「内容」を評価した結果で置き換えますが、結果が未定義でない場合に限られます。したがって、現在表示されているコンテンツを変更せずに新しいウィンドウを開きたい場合は、次の操作を実行できます。

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

void演算子は与えられた式を評価してからundefinedを返します。ページの更新を避けます。

14
Abhay Singh

javascript:void(0)の使用は、HTMLの作者がbutton要素の代わりにanchor要素を誤用していることを意味します。

アンカータグは、ページが更新されないようにhrefを "#"または "javascript:void(0)"に設定することによって擬似ボタンを作成するためにonclickイベントと共に悪用されることがよくあります。これらの値は、リンクのコピー/ドラッグ、新しいタブ/ウィンドウでリンクを開く、ブックマーク設定、およびJavaScriptがまだダウンロード中、エラーが発生している、または無効になっているときに予期しない動作を引き起こします。これはまた不正確な意味論を支援技術(例えばスクリーンリーダー)に伝える。このような場合は、代わりに<button>を使用することをお勧めします。一般的には、適切なURLを使用したナビゲーションにはアンカーのみを使用してください。

出典: MDNの<a>ページ

12
Ron Royston

Web開発者がjavascript:void(0)を使用するのは、aタグのデフォルトの動作を防ぐ最も簡単な方法だからです。 void(*anything*)undefinedを返し、それは偽の値です。そして偽の値を返すことは、そのデフォルトの振る舞いを妨げるonclickタグのaイベントにおけるreturn falseのようなものです。

だからjavascript:void(0)aタグのデフォルトの振る舞いを防ぐ最も簡単な方法だと思います。

リンクを使用可能な表示オブジェクトにするには、リンクにHREFターゲットを指定する必要があります。

ほとんどのブラウザは、高度なJavaScriptを解析しません。

<A HREF="" 

のようなタグ

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

ほとんどのブラウザのHREFタグは空白を許可しない、または空白を%20に変換するため、HEXはSPACEと同等になり、JavaScriptはインタプリタにはまったく役に立たなくなります。

そのため、インラインJavaScriptを実行するためにA HREFタグを使用する場合は、HREF FIRSTに有効な値を指定し、複雑すぎず(空白を含まない)、OnClickのようなイベント属性タグでJavaScriptを指定します。 、OnMouseOver、OnMouseOutなど.

典型的な答えはこのようなことをすることです:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

これはうまく機能しますが、ポンド記号/ハッシュタグがそうするように指示するので、ページを一番上にジャンプさせます。

実際にはA HREFタグにポンド記号/ハッシュタグを指定するだけでルートアンカーが指定されます。これは常にデフォルトでページ上部に表示され、A HREFタグ内でNAME属性を指定して別の場所を指定できます。

<A NAME='middleofpage'></A>

その場合、A HREFタグを「middleofpage」にジャンプしてOnClickイベントでJavaScriptを実行するように変更できます。

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

そのリンクが飛び跳ねないようにしたくない場合が多いので、2つのことができます。

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

クリックしてもどこにも表示されなくなりますが、ページが現在のビューポートから中央に移動する可能性があります。これはきれいではありません。 A HREFを使用してインラインJavaScriptを提供する最善の方法は何でしょうか。 JavaScript:void(0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

これはブラウザに今すぐ行くように指示しますが、代わりに有効なJavaScriptを実行します。void(0);空白が含まれておらず、URLとして解析されないため、HREFタグの最初に機能します。代わりにコンパイラによって実行されます。 VOIDは、0のパラメータを指定するとUNDEFINEDを返すキーワードです。これは、0を指定しないと発生する戻り値を処理するためにこれ以上リソースを使用しません(メモリ管理やパフォーマンスに優しい)。

次に起こることはOnClickが実行されることです。ページは移動しません、表示に関しては何も起こりません。

5
user4914655

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
}
0
Maciej Krawczyk