リンクを使用してJavaScriptを呼び出す方法


回答:


192
<a onclick="jsfunction()" href="#">

または

<a onclick="jsfunction()" href="javascript:void(0);">

編集:

上記の応答は、私が最初に投稿してからJSについて多くを学んだため、実際には良い解決策ではありません。この問題を解決するためのより良いアプローチについては、以下のEndangeredMassaの回答を参照してください。


11
最初のものはページの一番上にスクロールするので、2番目のものをお勧めします。
マットグランデ

7
そうです、「return false」を追加しない限り、間違いなくそうです。あなたの関数の後。
チェルシー

26
これは1998年のコードです。控えめな解決策の1つを使用してください。お願いします。
アンドリューヘッジス

7
どちらも使用しないでください!リンクはリンク用であり、JavaScriptを呼び出すためのダミー要素ではありません。
I.devries 2009年

4
JavaScriptをインラインに配置する場合は、次のようにします。<a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow

201

邪魔にならないJavaScript、ライブラリの依存関係なし:

<html>
<head>
    <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>

26
これが現在受け入れられている回答よりも優れている理由と、スクリプトがページのどこに配置されるべきかを説明できますか(これは明らかに初心者レベルの質問であるため)。
リザードを請求する

8
確実なこと。更新しました。
EndangeredMassa

6
ではhref、ユーザーをリダイレクトしたくなく、コードを実行したいだけの場合は、どうすればよいでしょうか。編集:空白のままにできることがわかりました:href=""
SabreWolfy 2012年

6
タグにを直接配置するよりも、をonclick介してイベントを追加した方がよいのはなぜですか?window.onloadonclick<a>
Nathan Reed

10
懸念事項の1つが、作業の機能単位をソースファイルの異なる物理的な場所に分離したくない、または多くのソースファイルに分散したくない場合です。あなたがあなたのa hrefタグにjavascriptの呼び出しを入れた場合、何が起こっているのか一行を見ればそれは痛々しいほど明確です。何が起こっているのかを把握するのが難しい物理的な場所に機能を分離することについて心配します。多分それは私のスタイルだけです。
火曜日2014

47
<a href="javascript:alert('Hello!');">Clicky</a>

編集、数年後:いいえ!これを行わないでください!私は若く愚かでした!

もう一度編集してください:カップルの人が理由を尋ねまします。これを行うべきではないの。いくつかの理由があります。

  1. プレゼンテーション: HTMLはプレゼンテーションに焦点を当てるべきです。JSをHREFに配置するということは、HTMLがビジネスロジックを処理していることを意味します。

  2. セキュリティ:このようなHTMLのJavaScriptは、コンテンツセキュリティポリシー(CSP)に違反しています。コンテンツセキュリティポリシー(CSP)は、クロスサイトスクリプティング(XSS)やデータインジェクション攻撃など、特定の種類の攻撃を検出して軽減するのに役立つセキュリティの追加レイヤーです。これらの攻撃は、データの盗難からサイトの改ざんやマルウェアの配布まで、あらゆるものに使用されます。詳細はこちら

  3. アクセシビリティ:アンカータグは、他のドキュメント/ページ/リソースにリンクするためのものです。リンクがどこにも届かない場合は、ボタンにする必要があります。これにより、スクリーンリーダーや点字端末などで何が起こっているのかを簡単に判断でき、視覚障害のあるユーザーに役立つ情報を提供できます。


16
おそらくこの方法の問題のいくつかの説明?これはより悪いhref='#'alert()onclick
Thomas Ahle 2015

3
私は、任意の説明がいいだろう。.. JavaScriptに新しいですし、これで間違っているものを理解していない
nilanjanaLodh

1
こんにちは、なぜこれを使用しないのかわかりません。JS関数を呼び出す必要があるシナリオで立ち往生していますが、指定できるのはリンクだけです。そしてあなたの解決策は働いた。
skapie19

43

そして、jQueryで邪魔にならないようにしてください。

  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>

2
これはSEOで機能し、クローラーがリンクを見つけてそれをたどるようになりますか?
Ahi Tuna

11
誰もがjqueryを使用しているわけではないからです。
stu

1
@GregMiernickiはい、リンクで何を意味するかによって異なります。HTMLを見てください。WebクローラーまたはJavaScriptがオフになっているクライアントは、指定されたHREFにアクセスします。JavaScript対応のクライアントはクリックアクションを実行し、その関数がfalse値を返さないか、preventDefaultを呼び出さない場合は、リンクをたどります。この場合、hrefはフォールバックであり、それがなぜ「無作法」と呼ばれるのか
Evan Langlois

12

控えめなJavascriptには多くの多くの利点があります。ここでは、それが行う手順と、それを使用するのが良い理由を示します。

  1. リンクは通常どおりロードされます。

    <a id="DaLink" href="http://host/toAnewPage.html">ここをクリック</a>

これは、JavaScriptが有効になっていないブラウザで機能するため、または機能しないJavaScriptコードにエラーがある場合に重要です。

  1. JavaScriptはページの読み込み時に実行されます:

     window.onload = function(){
            document.getElementById("DaLink").onclick = function(){
                   if(funcitonToCall()){
                       // most important step in this whole process
                       return false;
                   }
            }
     }
  2. JavaScriptが正常に実行された場合、おそらくJavaScriptを使用して現在のページのコンテンツをロードし、falseを返すとリンクの起動がキャンセルされます。つまり、戻り値をfalseにすると、JavaScriptが正常に実行された場合にリンクが無効になります。JavaScriptが実行されない場合でも実行できるようにする一方で、コンテンツが検索エンジンやコードが壊れた場合、またはJavaScript以外のシステムで表示された場合にコンテンツが表示されるように、適切なバックアップを作成します。

この主題に関する最良の本は、ジェレミー・キースの「Dom Scription」です。


9

または、PrototypeJSを使用している場合

<script type="text/javascript>
  Event.observe( $('thelink'), 'click', function(event) {
      //do stuff

      Event.stop(event);
  }
</script>

<a href="#" id="thelink">This is the link</a>

1
イベント処理関数をインラインで配置する必要がないのが気に入っています。
マークビエク2009年

1
それが唯一の方法です。インライン回答に投票してください。最近は言い訳のできない習慣です。
Andrew Hedges

5
@Andrew:インライン回答が悪い理由を説明するあなたの反対票とともにコメントを残してください。
トカゲを請求する

8

私はあなたが使うことができると思います onclick次のようなイベント。

<a onclick="jsFunction();">

0

@mister_luckyの回答に基づくjqueryでの使用:

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

HTMLコード:

<a id="unobtrusive" href="http://jquery.com">jquery</a>

-2

javascript:----見本を使用してください

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.