リダイレクトせずにクリックで簡単なJavaScript関数を実行したい。
href属性にJavaScript呼び出しを配置することの間の違いまたは利点はありますか（このように：
<a href="javascript:my_function();window.print();">....</a>）対onclick属性に配置する（onclickイベントにバインドする）か？
回答:
onclickをhref内に置くと、動作/アクションからコンテンツを分離することを強く信じている人を怒らせます。主張は、あなたのhtmlコンテンツはプレゼンテーションや振る舞いではなく、コンテンツだけに焦点を合わせたままにすべきであるということです。
最近の一般的な方法は、JavaScriptライブラリ（jqueryなど）を使用し、そのライブラリを使用してイベントハンドラを作成することです。それは次のようになります：
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );hrefするonclickか、インラインに配置するかの違いについての質問ではありませんか？何らかの理由でインラインに入れるとしたら、どちらを使用するべきですか？（実際には私はあなたが提案したことを行いますが、2つの属性の違いをスキップしたようです。）
悪い：
<a id="myLink" href="javascript:MyFunction();">link text</a>良い：
<a id="myLink" href="#" onclick="MyFunction();">link text</a>より良い：
<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>さらに良い1：
<a id="myLink" title="Click to do something"
href="#" onclick="MyFunction();return false;">link text</a>さらに良い2：
<a id="myLink" title="Click to do something"
href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>なぜ良いのですか？ので、return falseリンクを次の中からブラウザを防ぐことができます
ベスト：
jQueryまたは他の同様のフレームワークを使用して、要素のIDでonclickハンドラーをアタッチします。
$('#myLink').click(function(){ MyFunction(); return false; });href設定されておらず#、noJSブラウザーの実際のリンクに設定されている場合に最適な別のソリューションがあります。
javascriptに関して、1つの違いはthis、onclickハンドラー内のキーワードはonclick属性がこのDOM要素（この場合は<a>要素）を参照するのに対してthis、href属性内ではwindowオブジェクトを参照することです。
表示に関してhref、リンクに属性がない場合（つまり<a onclick="[...]">）、デフォルトでは、ブラウザはをアンカーではなくリンクとして扱うため、textカーソルは表示されます（頻繁に必要なpointerカーソルは表示されません）<a>。
動作に関しては、を介したナビゲーションによってアクションを指定する場合href、ブラウザは通常href、ショートカットまたはコンテキストメニューを使用して別のウィンドウでアクションを開くことをサポートします。を介してのみアクションを指定する場合、これは不可能onclickです。
ただし、DOMオブジェクトのクリックから動的アクションを取得するための最良の方法を尋ねる場合は、ドキュメントのコンテンツとは別にJavaScriptを使用してイベントをアタッチするのが最善の方法です。これはさまざまな方法で行うことができます。一般的な方法は、jQueryのようなJavaScriptライブラリを使用してイベントをバインドすることです。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
$('a#link').click(function(){ /* ... action ... */ })
</script>私が使う
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>長い道のりですが、仕事は終わりです。Aスタイルを使用して簡略化すると、次のようになります。
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style>
<a nohref onClick="alert('Hello World')">HERE</a>nohref以前に属性について聞いたことがありません。これは、そのようなjavascriptアクションを処理する最も論理的でエレガントな方法です。これはFF12およびIE8と互換性があります。したがって、私は私のすべてを置き換えますhref="JavaScript:void(0);"ことでnohref。どうもありがとう。乾杯。
nohref一部であるareaタグ、ありませんa！あなたの例は<a onClick="alert('Hello World')">HERE</a>
nohref存在しませんa。
これを行う最善の方法は次のとおりです。
<a href="#" onclick="someFunction(e)"></a>問題は、ブラウザーのページのURLの末尾にハッシュ（＃）が追加されるため、ユーザーが戻るボタンを2回クリックして、前のページに移動する必要があることです。これを考慮して、イベントの伝播を停止するコードを追加する必要があります。ほとんどのjavascriptツールキットには、このための機能がすでに備わっています。たとえば、dojoツールキットは
dojo.stopEvent(event);そうするには。
href="#"ブラウザを使用して名前付きアンカータグを検索すると、それが見つからないため、ウィンドウがページの上部にスクロールするように警告します。あなたはすでにトップにいます。この動作を回避するには、href="javascript:;"代わりに：を使用します。
一番上の答えは非常に悪い習慣です。空のハッシュにリンクすることは絶対にしないでください。これは、将来問題が発生する可能性があるためです。
他の多くの人が述べているように、イベントハンドラーを要素にバインドするのが最善ですが<a href="javascript:doStuff();">do stuff</a>、すべての最新のブラウザーで完全に機能し、テンプレートをレンダリングするときにそれを広く使用して、インスタンスごとに再バインドする必要をなくします。場合によっては、このアプローチはより良いパフォーマンスを提供します。YMMV
別の興味深い一口...
onclick＆hrefJavaScriptを直接呼び出すときの動作が異なります。
onclick合格するthisのに対し、正しくコンテキストをhrefしません、または他の言葉では<a href="javascript:doStuff(this)">no context</a>一方で、機能しません<a onclick="javascript:doStuff(this)">no context</a>でしょう。
はい、省略しましたhref。これは仕様に準拠していませんが、すべてのブラウザで機能しますが、理想的にはhref="javascript:void(0);"十分な対策が含まれている必要があります
javascript:スクリプト専用ではない属性を持つことは、HTMLの古い方法です。技術的には機能しますが、JavaScriptプロパティを非スクリプト属性に割り当てますが、これは良い方法ではありません。古いブラウザや最新のブラウザでも失敗する可能性があります（グーグルフォーラムの投稿は、Operaが「javascript：」のURLを好まないことを示しているようです）。
2番目の方法は、JavaScriptをonclick属性に入れることです。スクリプト機能が使用できない場合は、この方法は無視されます。JavaScriptを持たない人のためのフォールバックのために、hrefフィールド（通常は「＃」）に有効なURLを入力します。
次のコード行を使用するとうまくいきました。
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>これは機能します
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>JavaScriptで "href"を使用するときに気付いたもう1つのこと：
「href」属性のスクリプトは、2クリック間の時間差が非常に短い場合は実行されません。
たとえば、次の例を実行して、各リンクをダブルクリック（fast！）してみてください。最初のリンクは1回だけ実行されます。2番目のリンクは2回実行されます。
<script>
function myFunc() {
var s = 0;
for (var i=0; i<100000; i++) {
s+=i;
}
console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>Chrome（ダブルクリック）およびIE11（トリプルクリック）で再現。Chromeでは、十分に速くクリックすると、10回のクリックを実行して、関数を1回だけ実行できます。
Firefoxは問題なく動作します。
まず、hrefユーザーがリンクをコピーしたり、別のタブで開いたりすることができるため、URLを含めることが最善です。
場合によっては（HTMLが頻繁に変更されるサイトなど）、更新があるたびにリンクをバインドするのは現実的ではありません。
通常のリンク：
<a href="https://www.google.com/">Google<a/>そしてJSのためのこのようなもの：
$("a").click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
window.open(href);
return false;
});この方法の利点は、マークアップと動作を明確に分離することであり、すべてのリンクで関数呼び出しを繰り返す必要がありません。
ただし、毎回バインドしたくない場合は、onclickを使用して要素とイベントを渡すことができます。例：
<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>そしてこれはJSのために：
function Handler(self, e) {
e.preventDefault();
var href = $(self).attr("href");
window.open(href);
return false;
}このメソッドの利点は、毎回バインドすることを心配する必要なく、いつでも必要なときに新しいリンクを（たとえばAJAX経由で）ロードできることです。
<hr>
<h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
<button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
<div class="pull-right">
<button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
});
</script>