回答:
<a onclick="jsfunction()" href="#">
または
<a onclick="jsfunction()" href="javascript:void(0);">
編集:
上記の応答は、私が最初に投稿してからJSについて多くを学んだため、実際には良い解決策ではありません。この問題を解決するためのより良いアプローチについては、以下のEndangeredMassaの回答を参照してください。
邪魔にならないJavaScript、ライブラリの依存関係なし:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>
href、ユーザーをリダイレクトしたくなく、コードを実行したいだけの場合は、どうすればよいでしょうか。編集:空白のままにできることがわかりました:href=""。
onclick介してイベントを追加した方がよいのはなぜですか?window.onloadonclick<a>
<a href="javascript:alert('Hello!');">Clicky</a>
編集、数年後:いいえ!これを行わないでください!私は若く愚かでした!
もう一度編集してください:カップルの人が理由を尋ねましたます。これを行うべきではないの。いくつかの理由があります。
プレゼンテーション: HTMLはプレゼンテーションに焦点を当てるべきです。JSをHREFに配置するということは、HTMLがビジネスロジックを処理していることを意味します。
セキュリティ:このようなHTMLのJavaScriptは、コンテンツセキュリティポリシー(CSP)に違反しています。コンテンツセキュリティポリシー(CSP)は、クロスサイトスクリプティング(XSS)やデータインジェクション攻撃など、特定の種類の攻撃を検出して軽減するのに役立つセキュリティの追加レイヤーです。これらの攻撃は、データの盗難からサイトの改ざんやマルウェアの配布まで、あらゆるものに使用されます。詳細はこちら。
アクセシビリティ:アンカータグは、他のドキュメント/ページ/リソースにリンクするためのものです。リンクがどこにも届かない場合は、ボタンにする必要があります。これにより、スクリーンリーダーや点字端末などで何が起こっているのかを簡単に判断でき、視覚障害のあるユーザーに役立つ情報を提供できます。
href='#'とalert()中onclick?
そして、jQueryで邪魔にならないようにしてください。
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});
HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>
控えめなJavascriptには多くの多くの利点があります。ここでは、それが行う手順と、それを使用するのが良い理由を示します。
リンクは通常どおりロードされます。
<a id="DaLink" href="http://host/toAnewPage.html">ここをクリック</a>
これは、JavaScriptが有効になっていないブラウザで機能するため、または機能しないJavaScriptコードにエラーがある場合に重要です。
JavaScriptはページの読み込み時に実行されます:
window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}JavaScriptが正常に実行された場合、おそらくJavaScriptを使用して現在のページのコンテンツをロードし、falseを返すとリンクの起動がキャンセルされます。つまり、戻り値をfalseにすると、JavaScriptが正常に実行された場合にリンクが無効になります。JavaScriptが実行されない場合でも実行できるようにする一方で、コンテンツが検索エンジンやコードが壊れた場合、またはJavaScript以外のシステムで表示された場合にコンテンツが表示されるように、適切なバックアップを作成します。
この主題に関する最良の本は、ジェレミー・キースの「Dom Scription」です。
または、PrototypeJSを使用している場合
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>
@mister_luckyの回答に基づくjqueryでの使用:
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});
HTMLコード:
<a id="unobtrusive" href="http://jquery.com">jquery</a>