javascript - JavaScript リンクには、「#」または「javascript:void(0)」のどちらの「href」値を使用すればよいですか?

Question

以下は、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>

score 2255 · Accepted Answer

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

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

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

しかし、その後return doSomething()、onclickで使用するのを忘れて、単にを使用しますdoSomething()。

回避する2つ目の理由は、呼び出された関数がエラーをスローした場合、#finalが実行されないことです。return false;したがって、開発者は、呼び出された関数でエラーを適切に処理することも忘れないでください。

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

onclick="someFunc.call(this)"

また

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

使用するjavascript:void(0)ことで、上記の頭痛の種をすべて回避できます。欠点の例は見つかりませんでした。

したがって、あなたが孤独な開発者である場合、あなたは明らかにあなた自身の選択をすることができます、しかしあなたがチームとして働くならば、あなたは次のいずれかを述べなければなりません：

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

また

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

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

score 1384 · Accepted Answer

ない。

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

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

これが常に可能であるとは限らないことは承知していますが、私の意見では、公開 Web サイトを開発する際に努力する必要があります。

Unobtrusive JavaScriptとProgressive Enhancement (どちらもウィキペディア)を確認してください。

score 355 · Accepted Answer

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

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

score 312 · Accepted Answer

正直なところ、どちらもお勧めしません。その動作には様式化されたを使用<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 がスローされた場合) に予期しない動作を引き起こす可能性があり、適切なフォールスルー動作でない限り回避し、ナビゲーション履歴を変更する必要があります。

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

score 149 · Accepted Answer

最初のものは、理想的には、ユーザーが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

score 110 · Accepted Answer

あなたが私に尋ねたとしても。

「リンク」が何らかの 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>

score 104 · Accepted Answer

理想的には、次のようにします。

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

または、さらに良いことに、HTML にデフォルトのアクションリンクがあり、DOM のレンダリング後に JavaScript を介して目立たないように onclick イベントを要素に追加し、JavaScript が存在しない/使用されていない場合に確実に役に立たないイベントハンドラーがコードを混乱させ、実際のコンテンツを難読化する (または少なくとも気を散らす) 可能性があります。

score 76 · Accepted Answer

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

score 71 · Accepted Answer

私は以下を使用します

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

代わりは

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

score 61 · Accepted Answer

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

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

score 56 · Accepted Answer

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が呼び出されます。

score 52 · Accepted Answer

#より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 で直接使用することは悪い形式と見なされます。

score 43 · Accepted Answer

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

score 37 · Accepted Answer

#JavaScript では疑似スキームであるため、間違いなく hash ( ) の方が優れています。

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

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

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

score 27 · Accepted Answer

私は使うだろう：

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

理由:

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

score 27 · Accepted Answer

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

score 26 · Accepted Answer

JavaScript を実行するためだけにリンクを使用しないでください。

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

代わりに、リンク以外の要素を使用してください。

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

CSS でスタイルを設定します。

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

score 23 · Accepted Answer

jQueryを使ったほうがいいのですが、

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

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

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

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

簡単です！

score 20 · Accepted Answer

通常、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 を使用している閲覧者が拡張機能を表示している間、リダイレクトされます。

score 17 · Accepted Answer

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

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

score 17 · Accepted Answer

達成したい内容によっては、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 関数を呼び出したくない場合に使用できます。マウスオーバーイベントを発生させたい画像がある場合にうまく機能しますが、ユーザーがクリックするものはありません。

score 16 · Accepted Answer

開発者ツールを使用して Google Chrome で両方を試したところ、id="#"0.32 秒かかりました。このjavascript:void(0)方法にかかった時間はわずか 0.18 秒でした。そのため、Google Chrome では、javascript:void(0)より適切かつ高速に動作します。

score 15 · Accepted Answer

フェイクリンクがいくつかある場合は、それらに「リンクなし」のクラスを与えることを好みます。

次に、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 コードをアクティブにする方法として使用するのが好きです。

score 14 · Accepted Answer

JavaScript が無効になっているユーザーがサイトにアクセスできるようにすると便利です。この場合、href は、実行中の JavaScript と同じアクションを実行するページを指します。それ以外の場合は、「#」と「」を使用しreturn false;て、他の人が言及したデフォルトのアクション (ページの上部にスクロール) を防止します。

「」をグーグルで検索するjavascript:void(0)と、このトピックに関する多くの情報が得られます。このようなものの中には、void(0) を使用しない理由について言及しているものもあります。

score 13 · Accepted Answer

私は基本的に、プログレッシブエンハンスメントを使用して、この実用的な記事から言い換えています。簡単に言えば、JavaScript が有効になっているとユーザーインターフェイスが既に推測している場合を除き、javascript:void(0);or#javascript:void(0);を使用しないでください。また、スパンをリンクとして使用しないでください。これは、そもそも意味的に間違っているためです。

アプリケーションで /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>

score 11 · Accepted Answer

次のようにアンカーにヒントを記述することもできます。

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

ユーザーはこのリンクが何をするかを知ることができます。

score 10 · Accepted Answer

URLが必要になる可能性があるという事実を見失わないでください。参照が続く前にonclickが起動されるため、ページから移動する前にクライアント側で何かを処理する必要がある場合があります。

score 10 · Accepted Answer

最善の方法は、#Do1Not2Use3This4Id5 や同様の ID など、決して使用しない ID への href アンカーを作成することです。これにより、誰も使用せず、人々を怒らせないことが 100% 確実になります。

Javascript:void(0)これは悪い考えであり、CSP 対応の HTTPS ページのコンテンツセキュリティポリシーに違反していますhttps://developer.mozilla.org/en/docs/Security/CSP (@jakub.g に感謝)
just#を使用すると、ユーザーは押されたときにトップに戻ります
JavaScript が有効になっていない場合 (JavaScript 検出コードがない場合) は、ページを台無しにしません。
JavaScript が有効になっている場合は、デフォルトのイベントを無効にすることができます
ブラウザがテキストを選択できないようにする方法を知っていない限り、href を使用する必要があります (4 を使用すると、ブラウザがテキストを選択できなくなる原因が削除されるかどうかはわかりません)。

基本的に、この記事では誰も 5 について言及していません。これは、サイトが突然リンクの周りにあるものを選択し始めた場合に、専門的でないと見なされるため、重要だと思います。

score 10 · Accepted Answer

ダミーの動作が必要なリンクには href="#" を使用します。次に、次のコードを使用します。

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

つまり、href がハッシュ (*="#") に等しい場合、既定のリンクの動作が妨げられるため、機能を記述でき、アンカークリックには影響しません。

score 10 · Accepted Answer

ここで覚えておくべき重要なことがもう 1 つあります。セクション 508準拠。そのため、 JAWSなどのスクリーンリーダーがタブ操作でフォーカスできるようにするには、アンカータグが必要であることを指摘する必要があると思います。そのため、「JavaScript を使用するだけで、最初からアンカーを忘れる」という解決策は、一部のオプションではありません。href 内で JavaScript を起動する必要があるのは、画面をトップに戻す余裕がない場合のみです。settimeout を 0 秒間使用して、フォーカスが必要な場所に JavaScript を起動させることができますが、ページでさえ先頭にジャンプしてから戻ってきます。

score 9 · Accepted Answer

他の人が言及した点を取り上げるだけです。

イベント 'onload'a または $('document').ready{}; をバインドする方がはるかに優れています。次に、JavaScript をクリックイベントに直接配置します。

JavaScript が利用できない場合は、現在の URL への href を使用し、おそらくリンクの位置へのアンカーを使用します。このページは、JavaScript を使用していない人でも問題なく使用できます。

私が手元に持っているので、ここに役立つかもしれないいくつかのjQueryがあります：

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

score 8 · Accepted Answer

#の値を使い続けたいという人からの回答がたくさんあるhrefので、両方の陣営を満足させる回答を次に示します。

A）javascript:void(0)私は自分の価値として持っていることを嬉しく思いhrefます：

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B） jQueryを使用し#ていて、href値として必要なもの：

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

リンクが動的に作成されないことがわかっている場合は、click代わりに次の関数を使用してください。

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

score 8 · Accepted Answer

あなたの言葉から私が理解しているのは、JavaScript コードを実行するためだけにリンクを作成したいということです。

次に、ブラウザで JavaScript をブロックしている人がいることを考慮する必要があります。

そのため、実際にそのリンクを JavaScript 関数を実行するためだけに使用する場合は、動的に追加して、ユーザーがブラウザーで JavaScript を有効にしておらず、そのリンクを単に使用している場合でも表示されないようにする必要があります。ブラウザで JavaScript が無効になっている場合、そのようなリンクを使用しても意味のない JavaScript 関数をトリガーします。

そのため、JavaScript が無効になっている場合はどちらも適切ではありません。

また、JavaScript が有効になっていて、そのリンクを使用して JavaScript 関数を呼び出すだけの場合は、

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

を使用するよりもはるかに優れた方法です

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

href="#" はページに不要なアクションを実行させるためです。

また、 JavaScript がほとんどのブラウザーで既定のスクリプト言語として使用されていること<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>も、より優れている理由の 1 つです。<a href="#" onclick="myJsFunc();">Link</a>Internet Explorer の例として、onclick 属性を使用して、使用するスクリプト言語のタイプを定義します。別の優れたスクリプト言語が登場しない限り、Internet Explorer もデフォルトとして JavaScript を使用しますが、別のスクリプト言語を使用javascript:すると、Internet Explorer はどのスクリプト言語が使用されているかを理解できるようになります。

これを考慮して、私は使用して運動することを好みます

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

それを習慣にして、よりユーザーフレンドリーにするために、JavaScriptコード内にそのようなリンクを追加してください:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});

score 8 · Accepted Answer

Ideally you should have a real URL as fallback for non-JavaScript users.

これが意味をなさない場合は#、href属性として使用してください。onclickJavaScript が HTML に直接埋め込まれているため、この属性を使用するのは好きではありません。外部 JS ファイルを使用し、そのリンクにイベントハンドラーを追加することをお勧めします。#次に、ユーザーがクリックした後に URL が変更されて追加されないように、デフォルトのイベントを防止できます。

score 7 · Accepted Answer

全体的な感情と完全に一致して、void(0)必要なときに使用し、必要なときに有効なURLを使用します。

URL書き換えを使用すると、JavaScriptを無効にしてやりたいことを実行するだけでなく、JavaScriptが何を実行するかを正確に伝えるURLを作成できます。

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

サーバー側では、URLとクエリ文字列を解析して、必要な処理を実行するだけです。賢い場合は、サーバー側スクリプトがAjaxと標準の両方のリクエストに異なる方法で応答できるようにすることができます。ページ上のすべてのリンクを処理する簡潔な一元化されたコードを使用できるようにします。

URL書き換えチュートリアル

長所

ステータスバーに表示されます
JavaScriptのonclickハンドラーを介してAjaxに簡単にアップグレードできます
実質的にそれ自体をコメントする
ディレクトリが使い捨てのHTMLファイルで散らかるのを防ぎます

短所

JavaScriptでevent.preventDefault（）を引き続き使用する必要があります
サーバー側でのかなり複雑なパス処理とURL解析。

私はそこにもっとたくさんの短所があると確信しています。お気軽にご相談ください。

score 7 · Accepted Answer

一部の JavaScript コードを実行する方法としてリンクを使用する場合( D4V360が強く推奨するスパンを使用する代わりに)、次のようにします。

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

ナビゲーションに onclick を使用するリンクを使用している場合、JavaScript がオフの場合は代替として href="#" を使用しないでください。通常、ユーザーがリンクをクリックするのは非常に煩わしいものです。代わりに、可能であれば onclick ハンドラが提供するのと同じリンクを提供してください。それができない場合は、onclick をスキップして、href で JavaScript URI を使用してください。

score 7 · Accepted Answer

<a>要素を使用している場合は、これを使用してください。

<a href="javascript:myJSFunc();" />myLink</a>

個人的には、イベントハンドラーを後で代わりに JavaScript にアタッチします (attachEventまたは oraddEventListenerまたは <お気に入りの JavaScript フレームワークをここに配置> も使用)。

score 6 · Accepted Answer

JavaScript を HTML マークアップからできる限り除外することを強く好みます。<a>クリックイベントハンドラーとして使用している場合は、を使用することをお勧めし<a class="trigger" href="#">Click me!</a>ます。

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

多くの開発者が、クリックイベントハンドラにアンカータグを使用することは良くないと考えていることに注意することは非常に重要です。<span>または<div>に追加する CSSを使用することをお勧めしますcursor: pointer;。これは、多くの議論があれば問題です。

score 6 · Accepted Answer

無意味なコードで HTML を汚染しないように、HTML でインラインを使用しないでください。onclick="something();"すべてのクリックバインディングは、Javascript ファイル (*.js) で設定する必要があります。

次のようにバインディングを設定します:$('#myAnchor').click(function(){... **return false**;}); または $('#myAnchor').bind('click', function(){... **return false**;});

次に、何千ものコードを必要とせず、簡単にロードできる (そして SEO に適した) クリーンな HTML ファイルを作成しますhref="javascript:void(0);"。href="#"

score 3 · Accepted Answer

完全を期すためのもう1つのオプションがあります。これは、JavaScriptが無効になっている場合でもリンクが何も実行できないようにするもので、短いです:)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

IDがページに存在しない場合、リンクは何もしません。

一般的に、私はアーロン・ワグナーの答えに同意します。JavaScriptリンクはJavaScriptコードとともにドキュメントに挿入する必要があります。

score 2 · Accepted Answer

# を使用する代わりに、ここで javascript:void(0) を使用して、ヘッダーセクションへのアンカータグのリダイレクトを停止できます。

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>

score -2 · Accepted Answer

4.0 より前のブートストラップモーダルには、基本的に文書化されていない動作がhrefありa、正確に#. Bootstrap 3 を使用している場合、javascript:void(0);hrefs によって javascript エラーが発生します。

AJAX Error: error GET javascript:void(0);

このような場合、bootstrap 4 にアップグレードするか、href を変更する必要があります。

javascript - JavaScript リンクには、「#」または「javascript:void(0)」のどちらの「href」値を使用すればよいですか?

55 に答える 55

Related

Reference