38

タグからjs関数を呼び出すためのより良い方法は次のうちどれですか？

<a href="javascript:someFunction()">LINK</a>

また

<a href="#" onclick="someFunction();" return false;">LINK</a>

私はここでこの質問を見ましたが、それは<span onclick="someFunction()">より良い選択肢であると言っています。しかし、いくつかの理由により、私は<a>リンクを使用する必要があります。

編集：私はアンドロイドとiPadでも動作するはずのクロスブラウザとクロスプラットフォームのソリューションを探しています。

4

4 に答える 4

34

どちらも良くありません。

動作は、実際のマークアップとは独立して構成する必要があります。たとえば、jQueryでは次のようなことを行うことができます

$('#the-element').click(function () { /* perform action here */ });

別の<script>ブロックで。

これの利点はそれです

  1. CSSがマークアップとスタイルを分離するのと同じ方法でマークアップと動作を分離します
  2. 構成を一元化します（これは1の結果です）。
  3. jQueryの強力なセレクター構文を使用して複数の引数を含めることは簡単に拡張できます

さらに、ユーザーがJavaScriptを有効にしていない場合にonclick備えて、リンクタグにを提供できるため、正常に機能が低下します（ただし、イベントを使用する場合も同様です）。href

もちろん、 jQueryや別のJavaScriptライブラリを使用していない場合でも、これらの引数はカウントされます（しかし、なぜそうするのですか？）。

于 2012-06-04T07:21:45.303 に答える
9

2番目のオプションのいくつかの利点：

  1. this内部を使用onclickしてアンカー自体を参照できます（オプション1で同じことを行うと、window代わりに使用できます）。

  2. hrefをJS互換ではないURLに設定して、古いブラウザー（またはJSが無効になっているブラウザー）をサポートすることができます。JavaScriptをサポートするブラウザーは、代わりに関数を実行します（使用する必要のあるページにとどまりonclick="return someFunction();"、return false関数内から、またはonclick="return someFunction(); return false;"デフォルトのアクションを防ぐため）。

  3. を使用すると奇妙なことが起こりhref="javascript:someFunction()"、関数が値を返すのを見てきました。ページ全体がその値だけに置き換えられます。

落とし穴

インラインコード：

  1. スコープ内で実行されるタグdocument内で定義されたコードとは対照的に、スコープ内で実行されます。したがって、シンボルは要素または属性に基づいて解決される可能性があり、要素を関数として処理しようとする意図しない効果を引き起こします。<script>windownameid

  2. 再利用が難しい。あるプロジェクトから別のプロジェクトに移動するには、繊細なコピーペーストが必要です。

  3. ページに重みを加えますが、外部コードファイルはブラウザでキャッシュできます。

于 2012-06-04T07:23:57.233 に答える
3

どちらも悪い習慣だと言いたくなります。

onclick外部スクリプトからのイベントをリッスンするために、またはの使用をjavascript:却下する必要があります。これにより、マークアップとロジックをより適切に分離できるため、コードの繰り返しが少なくなります。

外部スクリプトはブラウザによってキャッシュされることにも注意してください。

この答えを見てください。

ここでクロスブラウザイベントリスナーを実装するいくつかの良い方法。

于 2012-06-04T07:29:04.363 に答える
3

最新のブラウザは、コンテンツセキュリティポリシーまたはCSPをサポートしています。これは最高レベルのWebセキュリティであり、すべてのXSS攻撃を完全にブロックするため、適用できる場合は強くお勧めします。

どちらの提案も、CSPを有効にすると壊れます。これは、インラインJavascript（ハッカーによって挿入される可能性がある）をページで実行できるためです。

ベストプラクティスは、Konrad Rudolphの回答のように、Javascriptでイベントをサブスクライブすることです。

于 2015-06-05T09:50:47.223 に答える