2011-10-13 33 views
139

私は時々、ウェブページで以下のhrefが使われるのを見ました。しかし、私はこれが何をしようとしているのか、その技術を理解していません。誰かが丁寧に説明できますか?href式<a href="javascript:;"></a>の機能は何ですか?

<a href="javascript:;"></a> 
+2

私は間違っていない場合、これでJSメソッドを呼び出すことができます.. javascript:SomeFunction() – Rob

+1

適切なクリックハンドラではうまく処理できないことは何もしません。あなたは醜い、アクセス不能で、人々が 'onclick =" javascript:... "'( 'onclick =" javascript:... "')を使用するべき 'javascript:'スキームを使用するようになったので、これを避けるべきです – Gareth

+1

http:// stackoverflow。 com/a/138233/908879 – ajax333221

答えて

150

<a>要素は、href属性またはname属性を持たないと無効なHTMLです。

リンク(つまり下線、手ポインタなど)として正しくレンダリングしたい場合は、href属性がある場合にのみ行います。

したがって、このようなコードは、リンクを作成する方法として使用されることがありますが、href属性に実際のURLを指定する必要はありません。開発者は明らかにリンク自体が何もしないことを望んでいました。これは彼が知っていた最も簡単な方法でした。

彼はおそらくリンクがクリックされたときにトリガされるJavaScriptイベントコードをいくつか持っていて、彼は実際に何をしたいのだろうか、彼は普通の<a>タグリンクのように見せたいと思っています。

一部の開発者は同じ目的でhref='#'を使用しますが、これによりブラウザがページの先頭にジャンプすることがありますが、これは望ましくない可能性があります。 href=''は現在のページに戻ってリンクしているため(つまりページが更新されるため)、hrefを空白のままにすることはできません。

これらの問題を回避する方法があります。 hrefのJavascriptコードの空ビットを使用することはその1つであり、それが最良の解決策ではありませんが、機能します。

+11

好奇心のために、これを行うより良い方法がありますか? –

+20

これは、イベント関数が 'return false;'や 'event.preventDefault()'を実行した場合、 'href'アクションが呼び出されることはないので、もっと賢明なものを入れることができます。 – Spudley

3

リンクを作成する方法は、クリックすると(JavaScriptイベントがバインドされている場合を除いて)何もしません。それは何もしません

<a href="Javascript: doStuff();">link</a> 

実際に(あなたの例のように)実行するにはJavaScriptがない:

それはリンクをJavascriptを実行する代わりに、以下の方法です。

+0

ええ、それはJSイベント/メソッドを呼び出します。 – Rob

+0

ああ、私は参照してください。それは事実上リンクを無効にします。 –

-1
<a href="javascript:void(0);"></a> 

javascript:

+1

http://stackoverflow.com/a/1293130/681538 – Alex

5
<a href="javascript:alert('Hello');"></a> 

JavaScriptコードを書くつもりブラウザがためだけの速記で伝えます:使用して、

<a href="" onclick="alert('Hello'); return false;"></a> 
+2

種類は同じですが、「同じような」比較のような真実ではありません。なぜなら、それは最初にそれを使うという罠に陥る理由です。 – Lankymart

21

基本的に代わりのページ(またはアンカー)を移動するためのリンクを使用してこのメソッドはJavaScript関数を起動します

<script> 
function doSomething() { 
    alert("hello") 
} 
</script> 
<a href="javascript:doSomething();">click me</a> 

リンクをクリックすると警告が表示されます。

21

リンク先への到達を回避するメカニズムはいくつかあります。この質問のうちの1つはあまり直感的ではありません。

クリーナーオプションは、#noがドキュメント内の未定義アンカーであるhref="#no"を使用することです。

#disableや#actionなどの意味論的な名前を使用すると、読みやすくすることができます。アプローチの

利点:

  • 空のhref = "#"
  • の "先頭に移動" 効果が欠点

のjavascriptの使用を回避回避:

  • アンカー名が文書で使用されていないことを確認する必要があります。

<a>要素がリンクとして動作していないので、これらのケースでは最良のオプションは<a>要素を使用しますが<div>し、所望のリンクのようなスタイルを提供していません。

+6

私は定義されていないアンカーも好きです。しかし、もう一つの欠点は、アンカーをブラウザの履歴に追加することです。そのため、OPでブランクJSメソッドを使用することを選択します。 –

5

は、この参照してください:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a> 
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a> 
<a href="javascript:;">Nothing happens if there is no javaScript to render</a> 
3

旧スレッドが、私はちょうど、開発者は、この構造を使用する理由は死んでリンクを作成しないことを追加したいが、いくつかの理由のためのJavaScript URLが参照を渡すことはありませんので、思いましたアクティブなhtml要素に正しく。

handler_function(this.id)は、onClickとして動作しますが、javascript URLとして動作しません。

これは、それぞれのハイパーリンクの呼び出しを手動で調整しなければならないPedantically標準準拠のコードを作成するか、一度だけ書き込んでどこでも使用できるわずかに非標準のコードを作成する選択肢です。

0

次のように常に適切にリンクをレンダリングするための最良の方法は、CSSを使用することです:

a {cursor: pointer !important} 

一つは、スレッドに言及したような不必要なものに従うことを避ける必要があります。

関連する問題