リンクAのセマンティクス、ライティング、ベストプラクティス。
Javaeyeでこのトピックを見て、議論は非常に興味深いものであり、私は関与するしかありませんでした。意味思考
まず、リンクAとボタンボタンはセマンティックであり、使用が便利なため交換することはできません。 Aはアンカーの略語であり、ナビゲートまたは位置を特定するために使用されるアンカーポイントです。典型的な使用法は次のとおりです。
<a href = http://www.w3c.org/> w3c webサイト</a> <a name = anchor-one>これはアンカーの場所です。
また、名前とHREFの属性を同時に指定することもできます。これが基本的な知識です。ご質問がある場合は、HTML 4.01仕様を参照してください。
ボタン(ボタンと<入力型=ボタン /送信 />を含む)について話しましょう。意味的には、ボタンはフォームの一部であり、トリガーされたアクションはフォームに関連付けられています。フォーム操作がまったくない場合は、ボタンを使用しないでください。いくつかの例を挙げてください:
上の写真はいくつかのリンクですが、ボタンのように見えますが、意味的にはaです。
上記の図のディスプレイとソートボタンは操作フォームです。意味的には、ボタンまたは入力を使用する方が適切です。 (注:Taobao検索結果ページは現在Aを使用しています。これは段階的な強化のためであり、以下で説明します)
要するに、リンクとボタンには独自のセマンティクスと使用シナリオがあり、自由に置き換えることはできません。分析を書く
世界は決してそれほど単純ではありません。今日のJavaScript Web Worldでは、リンクAはJSイベントをトリガーするためによく使用されます。
<a href = onclick = somints()> test 1 </a> <a href =#onclick = somine(); return false >> test 2 </a> <a href = javascript:void(0)onclick = someint()>> test 3 </a> <a href = javascript:void sonthy()> test 4 </a>
まず第一に、HREFはIEの下で自動的に完了するため、最初の執筆方法には問題があります。
それを書き込む2番目の方法は、オンクリックイベントのデフォルトイベントを直接防止するため、#in href =#は実際には任意の値になります。 #を使用すると、JSがない場合、クリックしてからこのページにとどまることを考慮してください(注:Aが1つの画面の下にある場合、この書き込み方法によりページが上部に戻ってしまいます)。
執筆の3番目の方法は、HREF値がJavaScript Pseudo-Protocolであり、VoidはJavaScript(!など)の単位オペレーターであることです。 void演算子の機能は、次の式のみを実行し、値を返さないことです。 void(0)はデフォルトのイベントをブロックしているようですが、実際、次の記述方法は問題ありません。
<a href = javascript:void(1)onclick = someint()>> test 3 </a> <a href = javascript:; onclick = somints()>> test 3 </a> <a href = javascript:onclick = somints()>> test 3 </a> <a href = javascript:true onclick = somine()>> test 3 </a>
Aのデフォルト操作はJavaScript Pseudo-Protocolの内容であるため、voidを追加するかどうかは他のイベントをトリガーします。 (注:オペラの下で、擬似プロトコルに戻り値がある場合、HREFは変更されるため、通常はvoid(0)または空のステートメントを書きます)
3番目の執筆方法を理解した後、執筆の4番目の方法を理解します:href = javascript:void something()。この方法の利点の1つは、マウスが吊り下げられたときに、ユーザーがステータスバーを介して実行される機能を確認できることです。これは開発者にとって利益かもしれませんが、通常のユーザーにとっては、これは本当に信頼を高めますか?それとも恐怖感ですか?データがなければ、結論を引き出すことはできません。
上記の執筆方法に加えて、クラスまたはIDにフックを追加し、JSのフックを介してイベントを追加することをお勧めします。反射
上記の執筆スタイルのどれが最適かを議論したくありません。起源の質問について考えてみましょう。なぜAを使用してJSイベントをトリガーするのですか?私が考えることができる理由は次のとおりです。
浮遊スタイルとは別に、実質的な理由はないことがわかります。当面の間、スタイルの問題を脇に置いて、例を見てみましょう。
上記はGoogle Readerの操作バーです。興味があれば、それを発射することもできます。使用されるタグは次のとおりです。
マウスの懸濁スタイルはまったく問題ではありません。
CSSでは、カーソル:ポインターを追加します。
上記の例から、結論を描くことができます。ナビゲーションやポジショニングセマンティクスなしでJSアクションをトリガーするだけの場合、スパンまたは他の適切なタグを使用できます。また、誤って使用する必要はありません(最初に、デフォルトのイベントを削除する必要があります。
もちろん、それがリンク自体である場合、ナビゲーションの前にJSロジックまたはフォームソートアプリケーションを追加するだけで、段階的な強化の観点から考慮して、すべてのHREF値を記述して、JSをサポートしないブラウザーで使用できるようにすることです。ベストプラクティス
それは要約ではなく、一度限りの最終決定ではありません。ベストプラクティスは、一連の原則にすぎません。コードを書く前にそれについて考える必要があります:
コードには生命があり、タグキングダムは動物園で、それらに精通しています。すべてが素敵です。