2012-04-23 6 views
2

インラインコードでリンク要素(A)をクリックしたときにブラウザが場所を変更する動作をスキップする方法が、リンクをクリックすると変更箇所がスキップされる

<a href="javascript:void(0)">void(0)</a> // I have always used this one 

それとも

<a href="javascript:;">:;</a> // This one is simple and now a days my favourite 

それとも

<a href="#">#</a> // Scroll to the top 

それとも、どのように行う、そしてなぜ?最高の練習は何ですか?

答えて

0

私は、hrefのjavascriptタグの代わりにonclickを使用することをお勧めします。しかし、あなたがする必要がある場合は、falseを返します。ブラウザがデフォルトの動作(URLを変更)から停止します。私は2つの最初のことに気づいているダウンサイドもありません。 3つ目は避けてください。非常に長いページでページスクロールを引き起こし、ナビゲータ履歴を汚染する可能性があります。個人的に

<a href="javascript:dostuff(); return false;">Do nothing</a> 
0

これは、デフォルトの動作をスキップする理由によって異なります。上記の方法では、href属性に情報が含まれていないため、リンクはあまり有用ではありません。彼らは単なるプレースホルダーです...存在しないID、<a href="#phlogiston">dummy link</a>を参照することもでき、クリックすると何もしません。

リンクに通常のhref属性を設定し、クリックしたときに何か他の操作を行う場合は、インラインでは行いません。代わりに、リンクがクリックイベントをトリガーするたびに、ページによってロードされたスクリプトを使用してevent.preventDefault()メソッドを呼び出すことができます。また、この回答を参照してください:event.preventDefault() vs. return false

+0

真実ではない厥そのクリックした時に、空白のHREFはactullyページをリロードします。 True for Chrome –

+0

ありがとうサイモン、あなたは正しいです! –

0

、私の代わりにJSとHTMLを混合のリンクにアクションを「注入」することを好みます。 JavaScriptの振る舞いにHTMLをスキャンする必要はありません。

のjQueryを使用した簡単な例:http://jsfiddle.net/5nbXT/

+0

私は分かりませんが、これはクライアントに余計なオーバーヘッドがあり、セレクタ内のすべての要素を対象にしてイベントハンドラをアタッチしなければならないと思います。 –

+0

@SimonEdströmもちろん、あなたが純真な人であれば、このテクニックはロード時に数ナノ秒の処理時間を追加するでしょう... 正直言って、DOMの横断は非常に高速ですが、これは事実上インラインバージョンと区別がつきません。 –

関連する問題