JavaScriptリンクに使用する「href」値は、「＃」または「javascript：void（0）」ですか？

以下は、JavaScriptコードを実行することのみを目的としたリンクを作成する2つの方法です。機能、ページの読み込み速度、検証目的などの点でどちらが優れていますか？

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

または

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

使用しますjavascript:void(0)。

3つの理由。#開発者のチームの間での使用を奨励すると、必然的に、次のように呼び出される関数の戻り値を使用するようになります。

function doSomething() {
    //Some code
    return false;
}

しかし、彼らreturn doSomething()はonclickで使うのを忘れて、ただを使いますdoSomething()。

回避する2番目の理由は、呼び出された関数がエラーをスローした場合、#ファイナルreturn false;が実行されないことです。したがって、開発者は呼び出された関数でエラーを適切に処理することも覚えておく必要があります。

3番目の理由は、onclickイベントプロパティが動的に割り当てられる場合があることです。アタッチメントのメソッドごとに特別に関数をコーディングせずに、関数を呼び出したり、動的に割り当てたりできるようにしたい。したがって、onclickHTMLマークアップの私の（または何でも）は次のようになります。

onclick="someFunc.call(this)"

または

onclick="someFunc.apply(this, arguments)"

使用するjavascript:void(0)ことで上記のすべての頭痛の種が回避され、私はマイナス面の例を見つけていません。

ですから、もしあなたが一人の開発者なら、あなた自身の選択を明確にすることができますが、チームとして働くなら、あなたはどちらかを述べなければなりません：

を使用しhref="#"、onclick常にreturn false;最後にが含まれていることを確認してください。呼び出された関数がエラーをスローしないonclickことを確認しますfalse。関数を動的にプロパティにアタッチする場合は、エラーをスローせず、エラーが返されないことを確認してください。

または

使用する href="javascript:void(0)"

2つ目は、明らかにコミュニケーションがはるかに簡単です。

どちらでもない。

意味のある実際のURLがある場合は、それをHREFとして使用します。リンクをクリックして新しいタブを開くか、JavaScriptが無効になっている場合、onclickは発生しません。

それが不可能な場合は、JavaScriptと適切なクリックイベントハンドラーを使用して、少なくともアンカータグをドキュメントに挿入する必要があります。

私はこれが常に可能であるとは限らないことを理解していますが、私の意見では、公開ウェブサイトを開発するために努力すべきです。

邪魔にならないJavaScriptとプログレッシブ拡張（両方のWikipedia）を調べてください。

やること<a href="#" onclick="myJsFunc();">Link</a>、<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>またはonclick属性を含む他のこと-5年前は大丈夫でしたが、今は悪い習慣になる可能性があります。理由は次のとおりです。

1. それは邪魔なJavaScriptの実践を促進します-それは維持するのが難しく、スケーリングするのが難しいことが判明しました。詳細については、控えめなJavaScriptをご覧ください。

2. あなたはあなたの時間を費やして、信じられないほど非常に冗長なコードを書いています-これはコードベースにほとんど（もしあれば）利益をもたらしません。

3. 現在、望ましい結果を達成するためのより優れた、より簡単で、より保守可能でスケーラブルな方法があります。

控えめなJavaScriptの方法

まったくhref属性を持たないでください！CSSを適切にリセットすると、欠落しているデフォルトのカーソルスタイルが処理されるため、問題はありません。次に、優雅で控えめなベストプラクティスを使用してJavaScript機能をアタッチします。これは、マークアップではなくJavaScriptロジックがJavaScriptに留まるため、より保守しやすくなります。これは、ロジックを分割する必要がある大規模なJavaScriptアプリケーションの開発を始めるときに不可欠です。ブラックボックス化されたコンポーネントとテンプレート。これについてもっと大規模なJavaScriptのアプリケーションアーキテクチャ

簡単なコード例

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

ブラックボックス化されたBackbone.jsの例

スケーラブルでブラックボックス化されたBackbone.jsコンポーネントの例については、こちらの動作するjsfiddleの例をご覧ください。控えめなJavaScriptプラクティスをどのように利用しているかに注意してください。少量のコードで、異なるコンポーネントインスタンス間の副作用や競合なしに、ページ全体で複数回繰り返すことができるコンポーネントがあります。すごい！

ノート

• 要素のhref属性を省略aすると、tabキーナビゲーションを使用して要素にアクセスできなくなります。tabキーを介してこれらの要素にアクセスできるようにする場合は、tabindex属性を設定するか、button代わりに要素を使用できます。Tracker1の回答で述べたように、ボタン要素のスタイルを通常のリンクのように簡単に設定できます。

• 要素のhref属性を省略するaと、Internet Explorer 6とInternet Explorer 7がa:hoverスタイルを適用しa.hoverなくなります。そのため、代わりに単純なJavaScriptシムを追加してこれを実現しています。これは完全に問題ありません。href属性がなく、適切な低下がない場合、リンクはいずれにしても機能せず、さらに大きな問題が発生する可能性があります。

• JavaScriptを無効にしてもアクションを引き続き機能させたい場合は、Ajaxリクエストなどを経由する代わりに手動でアクションを実行するURLにアクセスaするhref属性を持つ要素を使用します。これを行ってevent.preventDefault()いる場合は、ボタンがクリックされたときにリンクをたどらないことを確認するために、クリック呼び出しを確実に実行する必要があります。このオプションは、グレースフルデグラデーションと呼ばれます。

'#'ユーザーをページの上部に戻すので、通常はを使用しvoid(0)ます。

javascript:; のようにも動作します javascript:void(0);

どちらも正直に提案します。私は<button></button>その振る舞いに様式化されたものを使用します。

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

このようにして、onclickを割り当てることができます。またonclick、要素タグの属性を使用するのではなく、スクリプトを介してバインドすることをお勧めします。唯一の問題は、無効にできない古いIEの疑似3dテキスト効果です。

A要素を使用する必要がある場合は、javascript:void(0);前述の理由で使用してください。

• onclickイベントが失敗した場合に備えて、常にインターセプトします。
• 誤ったロード呼び出しが発生したり、ハッシュの変更に基づいて他のイベントがトリガーされたりすることはありません
• ハッシュタグは、クリックがフォールスルー（onclick throws）した場合に予期しない動作を引き起こす可能性があり、適切なフォールスルー動作でない場合は回避し、ナビゲーション履歴を変更する必要があります。

注：は、クリックによって実際に何が行われるかを示す追加のインジケータとして機能0する文字列に置き換えることができjavascript:void('Delete record 123')ます。

最初のものは、理想的には、ユーザーがJavaScriptを無効にしている場合にたどる実際のリンクがあります。JavaScriptが実行された場合にクリックイベントが発生しないように、必ずfalseを返してください。

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Angular2を使用する場合、この方法は機能します：

<a [routerLink]="" (click)="passTheSalt()">Click me</a>。

こちらをご覧くださいhttps://stackoverflow.com/a/45465728/2803344

あなたが私に尋ねてもどちらも;

「リンク」がJavaScriptコードを実行することのみを目的としている場合は、リンクと見なされません。JavaScript関数が結合されたテキストの一部です。リンクを模倣するために、<span>タグをonclick handler付けたタグといくつかの基本的なCSS を使用することをお勧めします。リンクはナビゲーション用に作成されており、JavaScriptコードがナビゲーション用でない場合は、<a>タグにすることはできません。

例：

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

理想的にはこれを行うでしょう：

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

または、さらに良いのは、HTMLにデフォルトのアクションリンクがあり、DOMがレンダリングされた後、JavaScriptを介して控えめにonclickイベントを要素に追加することで、JavaScriptが存在しない/利用されていない場合は、コードを無効にし、実際のコンテンツを難読化（または少なくとも混乱させる）する無用のイベントハンドラーがある。

使うだけで#面白い動きができるので#self、のタイピングの手間を省きたい場合に使用することをお勧めしますJavaScript bla, bla,。

私は以下を使用します

<a href="javascript:;" onclick="myJsFunc();">Link</a>

代わりに

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

href属性で通常のURLを使用し、onclickでJavaScript関数を呼び出す必要があると述べている他の提案に同意します。欠点は、彼らreturn falseが電話の後に自動的に追加することです。

このアプローチの問題は、関数が機能しない場合、または問題がある場合、リンクがクリックできなくなることです。Onclickイベントは常にを返すfalseため、通常のURLは呼び出されません。

非常に簡単な解決策があります。true正しく機能する場合は、関数に戻ります。次に、戻り値を使用して、クリックをキャンセルする必要があるかどうかを判断します。

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

doSomething()関数の結果は無効になっていることに注意してください。機能する場合は、が返さtrueれるため、否定（false）され、path/to/some/URLは呼び出されません。関数が戻る場合false（例えば、ブラウザーが関数内で使用されているものをサポートしていないか、何かがうまくいかない場合）、それは否定されtrue、path/to/some/URLが呼び出されます。

#はより優れjavascript:anythingていますが、以下はさらに優れています。

HTML：

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript：

$(function() {
    $(".some-selector").click(myJsFunc);
});

（ユーザーがJavaScriptを有効にしていない場合、そして仕様と予算を使用している場合は）常に適切な低下に努める必要があります。また、JavaScript属性とプロトコルを直接HTMLで使用することは、不適切なフォームと見なされます。

特にコントロールがデータの変更を生成することになっている場合は、<button>代わりに要素を使用することをお勧めします。（POSTのようなもの。）

要素を目立たないように注入する、プログレッシブエンハンスメントの一種であるとさらに良いです。（このコメントを参照してください。）

JavaScriptを使用してリンクを書き出していない限り（ブラウザーで有効になっていることがわかるように）、JavaScriptを無効にして閲覧しているユーザーに適切なリンクを提供し、onclickでリンクのデフォルトのアクションを防止するのが理想的です。イベントハンドラ。このように、JavaScriptが有効になっているものは関数を実行し、JavaScriptが無効になっているものはリンクをクリックするだけで何も起こらずに適切なページ（または同じページ内の場所）にジャンプします。

#JavaScriptでは疑似スキームであるため、ハッシュ（）は間違いなく優れています。

1. 汚染の歴史
2. エンジンの新しいコピーをインスタンス化します
3. グローバルスコープで実行され、イベントシステムを尊重しません。

もちろん、デフォルトのアクションを防止するonclickハンドラーを備えた「＃」は[はるかに]優れています。さらに、JavaScriptの実行のみを目的とするリンクは、問題が発生したときにユーザーをページの適切なアンカー（＃が先頭に送信される）に送信しない限り、実際には「リンク」ではありません。スタイルシートを使用してリンクのルックアンドフィールをシミュレートするだけで、hrefをまったく忘れることができます。

さらに、Cowgodの提案、特にこれに関して：...href="javascript_required.html" onclick="...これは良いアプローチですが、「JavaScriptが無効になっている」シナリオと「onclickが失敗する」シナリオを区別していません。

私は通常行く

<a href="javascript:;" onclick="yourFunction()">Link description</a>

javascript：void（0）よりも短く、同じことを行います。

私は使うだろう：

<a href="#" onclick="myJsFunc();return false;">Link</a>

理由：

1. これにより、hrefシンプルな検索エンジンで必要になります。それ以外のもの（文字列など）を使用すると、404 not foundエラーが発生する可能性があります。
2. リンクの上にマウスを置いても、それがスクリプトであることは表示されません。
3. を使用するreturn false;と、ページが上部にジャンプしたり、backボタンが壊れたりすることはありません。

これを使用するとjavascript:void(0)、右クリックでコンテンツメニューが開かなくなる可能性があるため、私は使用を選択します。しかしjavascript:;、より短く、同じことを行います。

したがって、<a />タグを使用してJavaScriptの処理を行っているときに、次のように配置href="#"した場合は、イベントの最後にreturn falseを追加できます（インラインイベントバインディングの場合）。

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

または、次のようにJavaScriptでhref属性を変更できます。

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

または

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

しかし、意味的には、これを達成するための上記の方法はすべて間違っています（ただし、正常に機能します）。ページをナビゲートするための要素が作成されておらず、それに関連付けられたJavaScriptの要素がある場合、それは<a>タグであってはなりません。

<button />すべての要素にイベントを追加することが許可されているため、代わりにa を使用して、必要に応じてbやspanなどの要素やその他の要素を必要に応じて実行できます。

したがって、を使用する利点が1つあります<a href="#">。すると、デフォルトでその要素にカーソルポインタが表示されますa href="#"。そのため、このようなCSSを使用して、cursor:pointer;この問題も解決できると思います。

そして最後に、あなたがJavaScriptコード自体からのイベントを結合している場合、あなたはそこに行うことができますevent.preventDefault()使用している場合は、これを達成するために<a>、タグを、しかし、あなたが使用していない場合は<a>、このためにタグを、あなたが優位性をそこに着く、あなたは「ドンこれを行う必要があります。

だから、もしあなたが見るなら、この種のもののためにタグを使わない方が良いです。

JavaScriptの実行のみを目的としてリンクを使用しないでください。

href = "＃"を使用すると、ページが一番上にスクロールします。void（0）を使用すると、ブラウザ内でナビゲーションの問題が発生します。

代わりに、リンク以外の要素を使用します。

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

そしてそれをCSSでスタイルします：

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

jQueryを使用する方が良いでしょう。

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

との両方を省略href="#"しhref="javascript:void(0)"ます。

アンカータグのマークアップは次のようになります

<a onclick="hello()">Hello</a>

十分簡単です！

あなたが使用することが起こる場合はAngularJSを、次のように使用することができます。

<a href="">Do some fancy JavaScript</a>

何もしません。

加えて

• （＃）のように、ページの上部に移動しません
  • したがって、falseJavaScriptで明示的に返す必要はありません。
• 簡潔です

hrefおそらくない場合は、アンカータグを使用する理由はありません。

ほぼすべての要素にイベント（クリック、ホバーなど）をアタッチできるので、単にa spanまたはdiv？

また、JavaScriptが無効になっているユーザーの場合：代替がない場合（たとえば、代替href）、<a>ユーザーは、<span>タグやタグが何であれ、少なくともその要素を表示して操作することはできません。

通常、JavaScriptを無効にしたクライアントがまだいくつかの機能を備えていることを確認するために、常にフォールバックリンクが必要です。この概念は控えめなJavaScriptと呼ばれます。

例...次の検索リンクがあるとします。

<a href="search.php" id="searchLink">Search</a>

いつでも次のことができます。

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

このようにして、JavaScriptが無効になってsearch.phpいるユーザーは、JavaScriptを使用しているビューアが拡張機能を表示している間、誘導されます。

個人的に組み合わせて使用​​しています。例えば：

HTML

<a href="#">Link</a>

jQueryを少し使って

$('a[href="#"]').attr('href','javascript:void(0);');

または

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

しかし、ユーザーが空のアンカーをクリックしたときにページが最上部にジャンプするのを防ぐためだけにそれを使用しています。onClickなどのonイベントを直接HTMLで使用することはほとんどありません。

私の提案は、アンカーの代わりに属性を<span>持つ要素を使用することclassです。例えば：

<span class="link">Link</span>

次に.link、本体と</body>タグの直前にラップされたスクリプトまたは外部JavaScriptドキュメントを使用して、関数をに割り当てます。

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

*注意：動的に作成された要素の場合、以下を使用します：

$('.link').on('click', function() {
    // do something
});

また、動的に作成された要素で作成された動的に作成された要素の場合は、次を使用します。

$(document).on('click','.link', function() {
    // do something
});

次に、小さなCSSを使用して、span要素をアンカーのようにスタイル設定できます。

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

ここだjsFiddleの前述の上記の例。

達成したいことに応じて、onclickを忘れて、hrefを使用することができます。

<a href="javascript:myJsFunc()">Link Text</a>

falseを返す必要性を回避します。#前述のとおり、ユーザーがページの上部に移動するため、このオプションは好きではありません。JavaScriptが有効になっていない場合にユーザーを送信する別の場所がある場合（私が作業する場所ではめったにありませんが、非常に良いアイデアです）、Steveの提案する方法はうまく機能します。

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

最後に、javascript:void(0)誰にも行きたくない場合や、JavaScript関数を呼び出したくない場合に使用できます。マウスオーバーイベントを発生させたい画像がある場合にうまく機能しますが、ユーザーがクリックするものは何もありません。

私がいくつかの偽のリンクを持っているとき、私はそれらに「リンクなし」のクラスを与えることを好む。

次に、jQueryで次のコードを追加します。

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

そしてHTMLの場合、リンクは単純です

<a href="/" class="no-link">Faux-Link</a>

アンカーに使用しない限り、ハッシュタグを使用したくありません。上記の操作は、2つ以上の偽リンクがある場合にのみ行います。それ以外の場合は、javascript：void（0）を使用します。

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

通常、私はリンクをまったく使用せずに、何かをスパンで囲み、ポップアップやコンテンツ表示などのJavaScriptコードをアクティブにする方法として使用します。

私はあなたが誤った二分法を提示していると思います。これらは2つのオプションだけではありません。

アンカータグを使用しているのに、本当にアンカーがないのではないかと提案したD4V360氏に同意します。あなたが持っているのは、少し異なる動作をするはずのドキュメントの特別なセクションです。<span>タグは、はるかに適切です。

私は開発者ツールを使用してgoogle chromeで両方を試したところ、id="#"0.32秒かかりました。一方でjavascript:void(0)この方法は、唯一の0.18秒かかりました。したがって、Google Chromeでは、javascript:void(0)より良く、より速く動作します。

基本的には、この実用的な記事からプログレッシブエンハンスメントを使用して言い換えています。短い答えは、あなたが使用しないということですjavascript:void(0);か、#あなたのユーザ・インタフェースは既にJavaScriptは、有効になっていると推察している場合を除き、その場合には、あなたが使用する必要がありますjavascript:void(0);。また、スパンをリンクとして使用しないでください。これは、最初は意味的にfalseであるためです。

/ Home / Action / ParametersなどのアプリケーションでSEO対応の URLルートを使用することもお勧めします。最初にJavaScriptなしで機能するページへのリンクがあれば、後でエクスペリエンスを向上させることができます。作業中のページへの実際のリンクを使用し、onlickイベントを追加してプレゼンテーションを強化します。

こちらがサンプルです。Home / ChangePictureは、ユーザーインターフェイスと標準のHTML送信ボタンを備えたページ上のフォームへのリンクですが、jQueryUIボタンを備えたモーダルダイアログに挿入すると見栄えがよくなります。どちらの方法でも、ブラウザーに応じて機能し、モバイルの最初の開発を満たします。

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>