質問: 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>
回答: 私は個人的にそれらを組み合わせて使用します。例えば: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 上記の例です。