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;
}
しかしそれから、彼らはonclickでreturn doSomething()を使うのを忘れて、doSomething()を使うだけです。
#を回避する2つ目の理由は、呼び出された関数がエラーをスローした場合、最後のreturn false;が実行されないことです。したがって、開発者は呼び出された関数でエラーを適切に処理することも忘れないでください。
3番目の理由は、onclickname__イベントプロパティが動的に割り当てられる場合があることです。あるアタッチメント方法または別の方法について特に機能をコーディングする必要なしに、機能を呼び出すかまたは動的に割り当てることができることが好ましい。したがって、HTMLマークアップの私のonclickname__（または何かに関係なく）はこのようになります。
onclick="someFunc.call(this)"
OR
onclick="someFunc.apply(this, arguments)"
javascript:void(0)を使うことは上記の頭痛の種すべてを避けます、そして私は欠点のどんな例も見いだしませんでした。
あなたが孤独な開発者なら、あなたは明らかにあなた自身の選択をすることができます、しかしあなたがチームとして働いているなら、あなたはどちらかを述べる必要があります：
href="#"を使用して、最後にonclickname__が常にreturn false;を含むことを確認してください。呼び出された関数がエラーをスローしないようにし、onclickname__プロパティに動的に関数をアタッチする場合はfalsename__をスローしないようにしてください。
OR
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年前には問題ありませんでしたが、今ではそれは悪い習慣になる可能性があります。これが理由です：
それは目立たないJavaScriptの慣習を促進します - それは維持するのが難しくて規模が難しいことがわかった。これについての詳細は控えめなJavaScript。
あなたはあなたの時間を信じられないほど過度に冗長なコードを書くことに費やしています - それはあなたのコードベースに非常に（少しの利益があっても）持っています。
望ましい結果を達成するための、より良く、より簡単で、より保守可能で拡張性のある方法があります。
控えめな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.jsexample
スケーラブルでブラックボックス化された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テキスト効果です。
あなたがMUSTがA要素を使うのであれば、すでに述べた理由でjavascript:void(0);を使ってください。
- あなたのonclickイベントが失敗した場合には常に傍受します。
- 誤ったロード呼び出しが発生したり、ハッシュの変更に基づいて他のイベントをトリガーしたりしません。
- ハッシュタグは、クリックが通過すると（onclickがスローされると）予期しない動作を引き起こす可能性があります。それが適切なフォールスルー動作でない限り、それを避け、ナビゲーション履歴を変更する必要があります。
注：0をjavascript:void('Delete record 123')のような文字列で置き換えることができます。これは、クリックが実際に行うことを示す追加のインジケータとして機能します。
最初のもの、理想的にはユーザーがJavaScriptを無効にしている場合に従うべき本当のリンク付き。 JavaScriptが実行された場合にclickイベントが発生しないように、必ずfalseを返してください。
<a href="#" onclick="myJsFunc(); return false;">Link</a>
Angular 2を使用している場合は、次のように機能します。
<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を有効にしていない場合、そしてそれがスペックと予算で行われている場合には）常に適切な品質低下に努めるべきです。また、HTMLで直接JavaScriptの属性とプロトコルを使用するのは悪い形式と考えられています。
JavaScriptを使用してリンクを書いているのでない限り（ブラウザで有効になっていることを確認するために）、JavaScriptを無効にしてブラウズしているユーザーには適切なリンクを提供してください。イベントハンドラこのようにして、JavaScriptを有効にしたものは機能を実行し、JavaScriptを無効にしたものはリンクをクリックして何も起こらずに適切なページ（または同じページ内の場所）にジャンプします。
代わりに<button>要素を使用することをお勧めします。 特に がコントロールにデータの変更をもたらすと想定される場合（POSTのようなものです。）
目立たないように要素を注入するのであれば、さらに良いでしょう。 （ このコメント を参照。）
JavaScriptでは疑似スキーマであるため、絶対にハッシュ（#）を使用するほうが優れています。
- 汚染の歴史
- エンジンの新しいコピーをインスタンス化します
- グローバルスコープで実行され、イベントシステムを尊重しません。
もちろん、デフォルトの動作を妨げる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>
理由：
- これは
hrefを単純にします、検索エンジンはそれを必要とします。それ以外のもの（文字列など）を使用すると、404 not foundエラーが発生する可能性があります。 - マウスがリンク上に移動しても、それがスクリプトであることを示すわけではありません。
return false;を使用することによって、ページは一番上にジャンプしたりbackボタンを壊したりしません。
Use javascript:void(0)を選択します。これを使用すると、右クリックでコンテンツメニューを開くことができなくなる可能性があるためです。しかし、javascript:;は短く、同じことをします。
そのため、<a />タグを使ってJavaScriptのことをしていて、href="#"を入れた場合は、 return false をイベントの最後に追加することができます （インラインイベントバインディングの場合） 好きです：
<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>
または href 属性をJavaScriptで変更することもできます。
<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>
または
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
しかし意味的には、これを達成するための上記のすべての方法は間違っています （それはうまくいきます） 。ページをナビゲートするための要素が作成されておらず、それにJavaScriptのものが関連付けられている場合は、<a>タグにしないでください。
すべての要素にイベントを追加することが許可されているため、単純に<button />を使用して、何かを実行したり、b、span、その他必要な要素を追加することができます。
だから、 一つの利点があります <a href="#">を使うこと。 a href="#"を実行すると、デフォルトでその要素のカーソルポインタが表示されます。そのためには、この問題も解決するcursor:pointer;のようにCSSを使用できると思います。
そして最後に、JavaScriptコード自体からイベントをバインドしているのであれば、<a>タグを使用している場合はこれを実現するためにevent.preventDefault()を実行できますが、<a>タグを使用していない場合は利点があります。あなたはこれをする必要はありません。
それで、あなたが見るならば、それはこの種のもののためにタグを使わない方が良いです。
JQueryを使うほうが良いでしょう。
$(document).ready(function() {
$("a").css("cursor", "pointer");
});
href="#"とhref="javascript:void(0)"の両方を省略します。
アンカータグのマークアップは次のようになります
<a onclick="hello()">Hello</a>
とてもシンプル！
JavaScriptを実行するという唯一の目的でリンクを使用しないでください。
Href = "＃"を使用すると、ページが一番上にスクロールされます。 void（0）を使用すると、ブラウザ内にナビゲーション上の問題が生じます。
代わりに、リンク以外の要素を使用してください。
<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>
そしてCSSでスタイルを設定します。
.funcActuator {
cursor: default;
}
.funcActuator:hover {
color: #900;
}
偶然 AngularJS を使っているのなら、以下を使うことができます。
<a href="">Do some fancy JavaScript</a>
これは何もしません。
加えて
- （＃）のようにページの先頭に移動することはありません。
- したがって、JavaScriptで明示的に
falseを返す必要はありません。
- したがって、JavaScriptで明示的に
- 短く簡潔です
通常は、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を使用している視聴者は強化された機能を表示します。
hrefがない場合は、おそらくアンカータグを使用する理由はありません。
ほとんどすべての要素にイベント（クリック、ホバーなど）を添付することができます。では、spanやdivを使用しないのはなぜでしょうか。
JavaScriptが無効になっているユーザーのために：代替がない（例えば代替のhref）のであれば、<a>や<span>タグであっても、少なくともその要素を見たり対話したりすることはできないはずです。
私はあなたが誤った二分法を提示していると思います。これらが唯一の2つの選択肢ではありません。
私はD4V360氏に同意します。D4V360は、あなたがアンカータグを使っていても、あなたは本当にここにアンカーを持っていないと言っています。あなたが持っているのはわずかに異なる振る舞いをするべきであるドキュメントの特別なセクションです。 <span>タグがはるかに適切です。
私はGoogle Chromeで開発者向けツールを試してみましたが、id="#"は0.32秒かかりました。 javascript:void(0)メソッドは0.18秒しかかかりませんでした。そのため、Googleクロムでは、javascript:void(0)がより速くより速く機能します。
あなたが達成したいことに応じて、あなたはonclickを忘れて、単にhrefを使うことができました：
<a href="javascript:myJsFunc()">Link Text</a>
それはfalseを返す必要性を回避します。 #オプションは好きではありません。前述のように、ユーザーがページの先頭に移動するためです。 JavaScriptを有効にしていない場合にユーザーに送信する場所がある場合（これは私の仕事では稀ですが非常に良い考えです）、Steveの提案した方法は非常にうまくいきます。
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
最後に、誰にも行きたくない場合や、JavaScript関数を呼び出したくない場合は、javascript:void(0)を使用できます。マウスオーバーイベントを発生させたい画像がある場合には非常に便利ですが、ユーザーがクリックするものは何もありません。
私がいくつかの偽リンクを持っているとき、私はそれらに「リンクなし」のクラスを与えることを好みます。
それからjQueryで、私は次のコードを追加します。
$(function(){
$('.no-link').click(function(e){
e.preventDefault();
});
});
そしてHTMLの場合、リンクは単に
<a href="/" class="no-link">Faux-Link</a>
アンカータグが使われているのでなければハッシュタグを使うのは嫌いです。2つ以上の偽のリンクがあるときだけ上記のようにします。
<a href="javascript:void(0)" class="no-link">Faux-Link</a>
通常は、リンクを使用しないで、何かをスパンでラップして、ポップアップやコンテンツ表示などのJavaScriptコードをアクティブにする方法として使用します。
私は個人的にそれらを組み合わせて使用します。例えば：
HTML
<a href="#">Link</a>
少しのjQueryで
$('a[href="#"]').attr('href','javascript:void(0);');
または
$('a[href="#"]').click(function(e) {
e.preventDefault();
});
しかし、ユーザーが空のアンカーをクリックしたときにページが一番上に移動しないようにするためだけに使用しています。 HTMLで直接onClickやその他のonイベントを使用することはめったにありません。
私の提案は、アンカーの代わりにclass属性を持つ<span>要素を使うことです。例えば：
<span class="link">Link</span>
次に、本体内、および.linkタグの直前、または外部JavaScript文書内でラップされたスクリプトを使用して、関数を</body>に割り当てます。
<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;
}
これがa jsFiddle上記の例です。
私は基本的に この実用的な記事をプログレッシブエンハンスメントを使って から言い換えています。 簡単な答えは、JavaScriptが有効になっているとユーザーインターフェイスが既に推測していない限り、javascript:void(0);または#を使用しないことです。その場合は、javascript:void(0);を使用する必要があります。また、spanをリンクとして使用しないでください。最初は意味的にfalseです。
/ Home/Action/Parametersなど、アプリケーションで _ seo _ friendly 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>
このようにアンカーにヒントを書くこともできます。
<a href="javascript:void('open popup image')" onclick="return f()">...</a>
それで、ユーザはこのリンクが何をするのかを知るでしょう。
＃Do1Not2Use3This4Id5などのIDのように、絶対に使用しないIDにhrefアンカーを作成するのが最善の方法です。
Javascript:void(0)は悪い考えであり、CSP対応のHTTPSページのコンテンツセキュリティポリシーに違反します https://developer.mozilla.org/en/docs/Security/CSP （@ jakub.gに感謝）#だけを使用すると、押されたときにユーザーは先頭に戻ります。- JavaScriptが有効になっていなくてもページを壊すことはありません（JavaScriptを検出するコードがない限り）
- JavaScriptが有効になっている場合は、デフォルトのイベントを無効にできます。
- ブラウザがテキストを選択できないようにする方法がわからない場合は、hrefを使用する必要があります（4を使用すると、ブラウザがテキストを選択できなくなることがなくなるかどうかはわかりません）。
基本的にこの記事の5つについて言及している人はいませんが、リンク周辺のものが突然選択され始めた場合、あなたのサイトは非専門的なものとして扱われるので重要です。
JavaScriptが無効になっているユーザーが自分のサイトにアクセスできるようにすると便利です。その場合、hrefは実行されているJavaScriptと同じアクションを実行するページを指します。そうでなければ、私は他の人が言ったようにデフォルトの動作（ページの一番上までスクロールする）を防ぐために "＃"を "return false;"と共に使います。
"javascript:void(0)"のグーグルはこのトピックに関する多くの情報を提供します。 これのようなそれらのいくつか はvoid（0）を使わない理由を述べています。
私はhrefに#の値を使い続けたいという人々からの多くの答えを見ています。そのため、ここで両方のキャンプを満足させる答えが得られるでしょう：
A） 私のhrefの値としてjavascript:void(0)を持つことができて嬉しいです：
<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) {
ここで覚えておくべきもう一つの重要なことがあります。 第508条 遵守。そのため、タブでフォーカスできるようにするには、 _ jaws _ などのスクリーンリーダー用のアンカータグが必要であることを指摘する必要があると思います。そのため、「JavaScriptを使用し、最初からアンカーを忘れる」という解決策は、このような場合の選択肢ではありません。 href内でJavaScriptを起動することは、画面が一番上に戻ることができない場合にのみ必要です。 settimeoutを0秒間使用して、フォーカスが必要な場所にJavaScriptを起動させることができますが、apageでも先頭に移動してから戻ることができます。
ダミーの振る舞いをしたいリンクにはhref = "＃"を使います。それから私はこのコードを使います：
$(document).ready(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
});
Hrefがハッシュ（* = "＃"）に等しい場合、それはデフォルトのリンクの振る舞いを妨げます。したがって、それでも機能を書くことができ、アンカークリックには影響しません。
あなたの言葉から私が理解していることは、あなたは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 = "＃"を指定すると、ページに不要なアクションが実行されるためです。
また、<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>が<a href="#" onclick="myJsFunc();">Link</a>より優れているもう1つの理由は、JavaScriptがほとんどのブラウザのデフォルトのスクリプト言語として使用されていることです。 Internet Explorerの例として、onclick属性を使用して使用されるスクリプト言語の種類を定義します。別の優れたスクリプト言語がポップアップしない限り、JavaScriptもデフォルトとしてInternet Explorerによって使用されますが、別のスクリプト言語が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>')
});
Hrefを使用して、ハッシュのみを含むすべてのリンクを削除することができます。
HTML：
<a href="#" onclick="run_foo()"> foo </a>
JS：
$(document).ready(function(){ // on DOM ready or some other event
$('a[href=#]').attr('href',''); // set all reference handles to blank strings
// for anchors that have only hashes
});
なぜこれを使わないのですか？これはページをスクロールアップしません。
<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
理想的には、JavaScript以外のユーザーのための代替として実際のURLを用意するべきです。
これが意味を成さない場合は、#をhref属性として使用してください。 JavaScriptをHTMLに直接埋め込むので、onclick属性を使うのは好きではありません。もっと良いアイデアは、外部のJSファイルを使用してから、そのリンクにイベントハンドラを追加することです。ユーザーがクリックした後にURLが#を追加するように変更されないように、デフォルトのイベントを防ぐことができます。
全体的なセンチメントと完全に一致するように、必要なときはvoid(0)を、必要なときは有効なURLを使ってください。
URLの書き換えを使用する JavaScriptで無効にしたいことを無効にするだけでなく、その目的を正確に伝えることができます。
<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>
サーバーサイドでは、URLとクエリ文字列を解析して必要なことをするだけです。もしあなたが賢いなら、サーバサイドスクリプトがAjaxと標準のリクエストの両方に異なって応答することを許可することができます。ページ上のすべてのリンクを処理する簡潔な集中コードを使用できるようにします。
長所
- ステータスバーに表示
- JavaScriptのonclickハンドラを介してAjaxに簡単にアップグレード
- 実際にコメントする
- ディレクトリを使い捨てのHTMLファイルでいっぱいになるのを防ぎます。
短所
- JavaScriptでもevent.preventDefault（）を使うべきです
- サーバー側でのかなり複雑なパス処理とURL解析。
私はそこにもっとたくさんの不利益があると確信しています。気軽に話し合ってください。
最新のWebサイトでは、要素がJavaScript機能のみを実行している（実際のリンクではない）場合は、hrefの使用を避けるべきです。
どうして？この要素の存在は、これが目的地とのリンクであることをブラウザに伝えます。これにより、ブラウザに新しいタブ/ウィンドウで開く機能が表示されます（Shift +クリックを使用したときにもトリガーされます）。そうすると、目的の機能が起動されずに同じページが開くことになります（ユーザーのフラストレーションの原因となります）。
IEに関して：IE8では、Doctypeが設定されていれば要素のスタイリング（ホバーを含む）が機能します。 IEの他のバージョンは、もう心配する必要はありません。
欠点のみ：HREFを削除すると、タブインデックスが削除されます。これを克服するには、リンクとしてスタイル設定されたボタンを使用するか、JSを使用してtabindex属性を追加します。
<a>要素を使用している場合は、これを使用してください。
<a href="javascript:myJSFunc();" />myLink</a>
個人的には、代わりに後でJavaScriptを使用してイベントハンドラを添付します（attachEventまたはaddEventListenerを使用するか、または<ここにお気に入りのJavaScriptフレームワークを追加します>も使用します）。
あなたのURLが必要であるかもしれないという事実を見逃さないでください - onclickは参照がたどられる前に発射されるので、時々あなたはページを離れてナビゲートする前に何かクライアント側で処理する必要があるでしょう。
その点を理解するために、他の人が言及したところです。
イベント 'onload'aまたは$（' document '）をバインドすることをお勧めします。 JavaScriptをクリックイベントに直接追加します。
JavaScriptが利用できない場合は、現在のURLへのhrefを使用し、おそらくリンクの位置へのアンカーを使用します。このページは、JavaScriptがなくても違いに気付かない人にはまだ使用可能です。
私が手元に持っているので、これは役に立つかもしれないいくつかのjQueryです：
var [functionName] = function() {
// do something
};
jQuery("[link id or other selector]").bind("click", [functionName]);
Ifリンクを使ってjust JavaScriptコードを実行する方法（D4V360のようなスパンを使う代わりに）を実行するだけです。
<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>
ナビゲーションにonclickのリンクを使用している場合は、JavaScriptがオフのときの代替としてhref = "＃"を使用しないでください。ユーザーがリンクをクリックすると、通常は非常に面倒です。代わりに、可能ならばonclickハンドラが提供するのと同じリンクを提供してください。それができない場合は、onclickを飛ばしてhrefにJavaScriptのURIを使うだけです。
できるだけJavaScriptをHTMLマークアップから除外することを強くお勧めします。クリックイベントハンドラとして<a>を使用している場合は、<a class="trigger" href="#">Click me!</a>を使用することをお勧めします。
$('.trigger').click(function (e) {
e.preventDefault();
// Do stuff...
});
そこにいる多くの開発者が、クリックイベントハンドラにアンカータグを使うのは良くないと信じていることに注意することは非常に重要です。彼らはあなたがそれに<span>を追加するいくつかのCSSと一緒に<div>またはcursor: pointer;を使うのを好むでしょう。多くの議論があるならば、これは問題です。
無意味なコードで汚染されないようにするために、HTMLに使用しないでください _ onclick="something();"をインライン化してください。すべてのクリックバインディングはJavascriptファイル（* .js）に設定する必要があります。
バインディングを次のように設定します。$('#myAnchor').click(function(){... **return false**;});または$('#myAnchor').bind('click', function(){... **return false**;});
それであなたは何千ものhref="javascript:void(0);"そしてただhref="#"なしでロードするのが簡単な（そしてseoにやさしい）きれいなHTMLファイルを持っています
これは、JavaScriptが無効になっていてもリンクが何もしないようにするためのもう1つの完全性のためのオプションです。
<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>
IDがページに表示されていない場合、リンクは何もしません。
一般的に、私はAaron Wagnerの答えに同意します。JavaScriptリンクはJavaScriptコードと共にドキュメントに挿入されるべきです。
•Javascript: void(0);は空の値の場合は無効です [未割り当て] 、つまりブラウザはNULLをクリックして _ dom _ に移動し、ウィンドウはfalseに戻ります。
•'#'は、JavaScriptのDOMまたはWindowの後にはありません。これは、アンカーhref内の「＃」記号が _ link _ であることを意味します。同じ現在の方向にリンクします。
2019年1月に編集
HTML5 では、href属性なしでa要素を使うのは valid です。 "プレースホルダハイパーリンク"と見なされます /
A要素にhref属性がない場合、その要素は、リンクが適切であればリンクが配置されていた場所のプレースホルダを表し、要素の内容だけで構成されます。
例：
<a>previous</a>
それ以外の場合は、それ以外の場合は：
1 - リンクがどこにも行かない場合は、<a>要素を使用しないでください。 <span>または他の適切なものを使用し、あなたが望むようにそれをスタイルするためにCSS :hoverを追加してください。
2 - 生のまま、正確かつ高速にしたい場合は、javascript:void(0) OR javascript:undefined OR javascript:;を使用します。
＃を使用する代わりに、ここでjavascript：void（0）を使用して、ヘッダーセクションへのアンカータグのリダイレクトを停止できます。
function helloFunction() {
alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
最もシンプルで誰もが使用するのは、ほとんどの場合javascript：void（0）＃を使用する代わりに使用できますtag section to header section =。
<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>
function testFunction() {
alert("hello world");
}