web-dev-qa-db-ja.com

HrefとonclickのJavaScript関数

リダイレクトせずにクリックで単純なJavaScript関数を実行したいです。

JavaScript呼び出しをhref属性に入れることの間に違いや利点はありますか？

<a href="javascript:my_function();window.print();">....</a>

）それをonclick属性に入れること（onclickイベントにバインドすること）に対して？

javascripthref
420
SkunkSpinner

オンクリックをhref内に置くことは、内容と行動/行動との分離を強く信じる人々を怒らせるでしょう。その理由は、あなたのHTMLコンテンツはプレゼンテーションや振る舞いではなく、コンテンツだけに集中し続けるべきだということです。

最近の一般的な方法は、JavaScriptライブラリ（jqueryなど）を使用し、そのライブラリを使用してイベントハンドラを作成することです。それは次のようになります。

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
247
Parand

悪い： 

<a id="myLink" href="javascript:MyFunction();">link text</a>

良い： 

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

より良い： 

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

さらに良い1： 

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

さらに良い2： 

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

どうしていいの？ return falseはブラウザがリンクをたどらないようにするからです

最高：

JQueryまたは他の同様のフレームワークを使用して、要素のIDでonclickハンドラを添付します。

$('#myLink').click(function(){ MyFunction(); return false; });
909
demp

javascript に関しては、thisname__ハンドラーのonclickname__キーワードは、そのonclickname__属性を持つDOM要素（この場合は<a>要素）を参照するのに対して、thisname__属性はhrefname__属性を参照します。 windowname__オブジェクトに追加します。

presentation に関しては、リンクにhrefname__属性がない場合（つまり<a onclick="[...]">）、デフォルトでは、ブラウザはtextname__カーソルを表示します（ただし、通常は望まれるpointername__カーソルは表示されません）。 <a>はアンカーであり、リンクではありません。

behavior の観点から、hrefname__を介したナビゲーションでアクションを指定する場合、ブラウザは通常、ショートカットメニューまたはコンテキストメニューを使用して別のウィンドウでそのhrefname__を開くことをサポートします。 onclickname__を介してのみアクションを指定する場合、これは不可能です。

しかし、DOMオブジェクトをクリックするだけで動的なアクションを実行するための最善の方法が何かを尋ねているのであれば、ドキュメントのコンテンツとは別にjavascriptを使用してイベントを添付するのが最善の方法です。あなたは多くの方法でこれを行うことができます。一般的な方法は、jQueryのようなJavaScriptライブラリを使ってイベントをバインドすることです。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>
65
Adam

私が使う

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

長い道のりですが、仕事は終わりです。単純化するためにAスタイルを使うと次のようになります。

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>
17
Clif Collins

これを行うための最良の方法は、

<a href="#" onclick="someFunction(e)"></a>

問題は、ブラウザのページのURLの最後にハッシュ（＃）が追加されるため、ユーザーが戻るボタンを2回クリックして自分の前のページに移動する必要があることです。これを考慮して、イベント伝播を停止するためのコードを追加する必要があります。ほとんどのJavascriptツールキットには、すでにこの機能があります。例えば、dojoツールキットは

dojo.stopEvent(event);

そうするには。

10
linusthe3rd

ここに加えて、hrefはブラウザのステータスバーに表示され、onclickは表示されません。 JavaScriptコードをそこに表示するのはユーザーフレンドリーではないと思います。

10
Kamarey

それは私のためにこのコード行を使ってうまくいきました：

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
8
Omar Yassin Carcelen

スクリプティング専用ではない属性にjavascript:を含めることは、HTMLの古い方法です。技術的には機能しますが、それでもJavaScriptのプロパティをスクリプト以外の属性に割り当てています。これはお勧めできません。古いブラウザや最近のブラウザでさえ失敗することさえありえます（googledフォーラムの投稿はOperaが 'javascript：'のURLを好きではないことを示しているようです）。

より良い方法は、JavaScriptをonclick属性に入れるという2番目の方法です。スクリプト機能が利用できない場合は無視されます。 JavaScriptを持っていない人のための代替として、hrefフィールドに有効なURL（通常は '＃'）を入力してください。

6
zombat

この作品

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
5
TitusMix

一番上の答えは非常に悪い習慣です。問題が発生する可能性があるため、空のハッシュにリンクしないでください。

他の多くの人が言っているように、イベントハンドラーを要素にバインドするのが最善ですが、<a href="javascript:doStuff();">do stuff</a>は現代のすべてのブラウザーで完璧に機能します。場合によっては、この方法でパフォーマンスが向上します。 YMMV

もう一つの面白いちょっと....

javascriptを直接呼び出すときのonclickとhrefの動作は異なります。

onclickはthisコンテキストを正しく渡しますが、hrefはうまくいきません。つまり<a href="javascript:doStuff(this)">no context</a>はうまくいきませんが、<a onclick="javascript:doStuff(this)">no context</a>はうまくいきません。

はい、私はhrefを省略しました。これは仕様には従っていませんが、すべてのブラウザで機能しますが、理想的には、適切な手段としてhref="javascript:void(0);"を含める必要があります。

4
Eduardo

個人的には、JavaScriptの呼び出しをHREFタグに入れるのは面倒です。私は通常、何かがJavascriptリンクであるかどうかにはあまり注意を払いません。そして、しばしば新しいウィンドウでものを開くことを望みます。これらの種類のリンクのいずれかを使用してこれを実行しようとすると、何も表示されていない空白のページとロケーションバーにJavaScriptが表示されます。しかし、これはonlickを使用することによって少し回避されます。

4
Peter

JavaScriptで "href"を使用したときに気付いたもう1つのこと：

2回のクリックの時差が非常に短いと、 "href"属性のスクリプトは実行されません。

たとえば、次の例を実行して各リンクをダブルクリック（高速）してみてください。最初のリンクは一度だけ実行されます。 2番目のリンクは2回実行されます。

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Chrome（ダブルクリック）とIE11（トリプルクリック）で再現。 Chromeでは、あなたが十分に速くクリックするならば、あなたは10クリックをすることができて、たった1つの機能実行を持つことができます。

Firefoxは問題なく動作します。

3
kolobok
 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>
1
Andrew

まず、hrefにURLを含めるのがベストです。リンクをコピーしたり、別のタブで開いたりできるからです。

場合によっては（HTMLが頻繁に変更されるサイトなど）、更新があるたびにリンクをバインドするのは現実的ではありません。

典型的なバインド方法

通常のリンク：

<a href="https://www.google.com/">Google<a/>

そして、JSのためにこのようなもの：

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

この方法の利点は、マークアップと動作が明確に分離されているため、すべてのリンクで関数呼び出しを繰り返す必要がないことです。

バインド方法なし

ただし、毎回バインドしたくない場合は、onclickを使用して要素とイベントを渡すことができます。

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

そしてこれはJSの場合：

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

この方法の利点は、いつでもバインドを気にせずにいつでも新しいリンクを（たとえばAJAX経由で）ロードできることです。

0
jchavannes

メールフォルダがURLを表示するように設定されているOutlookのWebページ機能にページが埋め込まれていると、javascript：hrefが機能しないことを経験しました。

0
Christian