"javascript:void(0);" vs "return false" vs "preventDefault()"

質問

あるリンクが何もせず、javascriptのアクションにのみ反応するようにしたい場合、リンクがページの上端にスクロールするのを避ける最善の方法は何でしょうか？

私はそれを行うためのいくつかの方法を知っている、彼らはすべてうまく動作するように見える。

<a href="javascript:void(0)">Hello</a>

または

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(){
      //...
      return false;
    });
  });
</script>

そしてさらに:

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(event){
      event.preventDefault();          
      //...
    });
  });
</script>

好みはありますか？ なぜ？ どのような条件で？

PS: もちろん、上記の例はjqueryを使用していることを前提にしていますが、mootoolsやprototypeにも同等のものがあります。

どのように解決するのですか？

バインドしています。

• javascript: URLは常に避けるべき恐怖である。
• インライン イベント ハンドラ属性も素晴らしいものではありませんが、ちょっとした迅速な開発/テストには適しています。
• スクリプトからバインドし、マークアップをきれいに残すことは、一般的にベストプラクティスと考えられています。jQueryはこれを奨励していますが、どのライブラリやプレーンJSでもできない理由はありません。

レスポンスです。

• jQueryの場合 return false は、両方の preventDefault と stopPropagation であるため、イベント通知を受け取る親要素を気にする場合は意味が異なります。
• jQueryはここでそれを隠していますが preventDefault / stopPropagation は、通常IEでは異なるスペルでなければなりません( returnValue / cancelBubble ).

しかし

• リンクでないリンクがあります。これはどこにもリンクしておらず、アクションです。 <a> はこのための理想的なマークアップではありません。誰かがそれをミドルクリックしたり、ブックマークに追加したり、リンクが持つ他の機能を使おうとすると、うまくいかないでしょう。
• ページ上の別の要素を開いたり閉じたりする場合など、リンクが本当に何かを指す場合は、リンクが #thatelementsid を指すように設定し、控えめなスクリプトを使用してリンク名から要素 ID を取得します。また location.hash をスニッフィングして、その要素を開くことができます。
• そうでなければ、純粋にアクションであるものについては、そのようにマークアップすることが最善でしょう。 <input type="button"> または <button type="button"> . 必要であれば、ボタンの代わりにリンクのように見えるようにCSSでスタイルを設定することができます。
• しかし、IE や Firefox では、ボタンのスタイリングを完全に取り除くことができない部分があります。通常それは重要ではありませんが、もし本当に絶対的な視覚的制御が必要な場合は、妥協案として <span> を使用することです。を追加することができます。 tabindex プロパティを追加することで、ほとんどのブラウザでキーボードからアクセスできるようになりますが、これは実際には適切に標準化されていません。また、SpaceやEnterなどのキー入力を検知してアクティブにすることもできます。これはちょっと不満ですが、それでもかなり人気があります (SO などはこのようにしています)。
• もうひとつの可能性は <input type="image"> . これは、完全な視覚的コントロールを持つボタンのアクセシビリティの利点を持ちますが、純粋な画像ボタンに対してのみです。