15

他のページに移動するための HTML ボタンを作成する方法は複数あります。

方法 1

<button id="btn_click">Click Me</button>
<script>
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
</script>
  • 利点: HTML から JS を分離する (MVC)
  • 短所: 長いコード、JS に依存
  • 注: jQuery セレクターはオプションであり、従来の JavaScript を使用できます

方法 2

<button onclick="window.location='http://www.google.com'">Click Me</button>
  • 利点: ワンライナー、ボタンに ID を割り当てる必要がない
  • 短所: JS と HTML を混在させ、JS に依存する

方法 3

<a class="click-me" href="http://www.google.com">Click me</a>
<style>
.clickMe {
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}​
</style>
  • 利点: JS に依存する必要がない
  • 短所: 偽のボタンのように見えます。IE9+ が必要です (appearanceこれは CSS3 プロパティです)。
  • 注：ここからです

方法 4

<form action="http://www.google.com">
<button>Click Me</button>
</form>
  • 利点: 最短のコード、JS に依存する必要がない
  • 短所:<form>タグの誤用。別の送信ボタンがある場合は機能しません

プログラマーの皆さん、どのアプローチが最も効率的で (したがって広く使用されている)、その理由は?

注:これをコミュニティ wiki として作成できますか?

4

2 に答える 2

5

リンクを張っています。リンクはリンクです。リンクは別のページに移動します。それがリンクの目的であり、誰もがそれを理解しています。したがって、私の本では方法 3 が唯一の正しい方法です。

私は自分のリンクがボタンのように見えることをまったく望んでおらず、そうした場合でも、見た目よりも機能性が重要だと考えています。

Javascript が必要なだけでなく、視覚障害者用のツールがこの Javascript 拡張ボタンをよく理解できない可能性があるため、ボタンへのアクセスが困難になります。

方法 4 も同様に機能しますが、実際の機能というよりもトリックです。フォームを悪用して、この他のページに「何も」投稿しません。それはきれいではありません。

于 2013-07-10T08:09:53.513 に答える
2

私が方法 3 を使用するのは、それが他の人にとって最も理解しやすいためです (タグを見るたびに<a>、それがリンクであることがわかります)。

最後に、他のページに移動するためだけに JS を使用することは、有用でも効率的でもないと思います。

于 2013-07-10T08:10:36.017 に答える