JavaScript機能href前onclick

StackOverflow https://stackoverflow.com/questions/1070760

  •  21-08-2019
  •  | 
  •  

質問

に走りたい簡単にJavaScript機能をクリックせずにリダイレクト.

何が違うでしょうかまたは利益の間にはJavaScriptを呼んで href 属性のようになります: 

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

)vs.に記載しておくことは、 onclick 属性（結合の onclick イベント)?

役に立ちましたか？

解決

のhref以内にonclickのを置くと行動/行動からコンテンツの分離を強く信じている人たちを怒らせるでしょう。引数には、あなたのHTMLコンテンツは、単にコンテンツ上ではなく、プレゼンテーションや行動に焦点を当てたままにしてくださいということです。

一般的なパスは、これらの日には、JavaScriptライブラリを使用する（例えば。jqueryの）と、そのライブラリを使用してイベントハンドラを作成することです。それはようになります：

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

他のヒント

悪い： 

<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; });

のJavaScriptのの面では、違いが1つthisハンドラでonclickキーワードがでonclickに対し、その<a>それを属性である（この場合はthisエレメント）DOM要素を参照するということですhref属性がwindowオブジェクトを参照します。

のプレゼンテーションの面では、の、href属性は、リンク（すなわち<a onclick="[...]">）に存在しない場合、その後、デフォルトでは、ブラウザがtextカーソル（とではないことが多い-希望pointerカーソル）が表示されますので、それは、リンクをアンカーとして<a>を処理し、されていません。

href介してナビゲーションによるアクションを指定する場合、

動作の観点では、ブラウザは、典型的には、ショートカットまたはコンテキストメニューのいずれかを使用して、別のウィンドウでそのhrefを開くサポートします。唯一onclick経由でアクションを指定する場合、これは不可能です。

<時間>

しかし、あなたがして行くための最善の方法がある文書の内容とは別のJavaScriptを使用してイベントを取り付け、DOMオブジェクトのクリックからの動的なアクションを取得するための最良の方法とは何かを求めている場合。あなたはいくつかの方法でこれを行うことができます。一般的な方法は、イベントをバインドする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>

私が使用して

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>

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

これを行うための最善の方法はである：

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

問題は、このは、このようにあなたの前のページに移動するために二回戻るボタンをクリックするようユーザーに要求するには、ブラウザでページのURLの最後にハッシュ（＃）を追加することです。このことを考慮すると、あなたはイベントの伝播を停止するいくつかのコードを追加する必要があります。ほとんどのJavaScriptツールキットは、すでにこの機能を持っています。例えば、道場ツールキットが使用

dojo.stopEvent(event);

そうする。

これは、このコード行を使用して、私のために働いてます：

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

スクリプトのために特別ではない任意の属性にjavascript:を持つことは、HTMLの時代遅れの方法です。技術的には、それは動作しますが、あなたはまだ良い方法ではありません非スクリプト属性にjavascriptのプロパティを割り当てています。それも、古いブラウザでは失敗することができ、あるいはいくつかの近代的なものが（ググフォーラム投稿はオペラが好きなのJavaScript：「いないことを示すためにseemdのURL）。

より良い練習にはスクリプト機能が利用できない場合は無視されonclick属性にあなたのジャバスクリプトを置くために、第二の方法だろう。 JavaScriptを持っていない人のためのフォールバックのためのhrefフィールド（一般的に「＃」）で、有効なURLを置きます。

トップの答えは、それが道の問題を作成することができるように、1つは、これまでの空のハッシュにリンクすることはありません、非常に悪い習慣です。

ベストは、他の多くの人が述べたように要素にイベントハンドラをバインドすることで、しかし、<a href="javascript:doStuff();">do stuff</a>は、すべての近代的なブラウザで完璧に動作し、各インスタンスに再バインドすることを避けるために、テンプレートをレンダリングするとき、私は広範囲にそれを使用します。いくつかのケースでは、このアプローチは、より良いパフォーマンスを提供しています。 YMMV

もう一つの興味深いTIDビット....

直接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);"を含める必要があります、が、それは、すべてのブラウザで動作します。

この作品

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

個人的に思うのをjavascriptのURLタグできませんこんに注意を払うというのは、javascriptのリンクは、しばしば時代を開いても変更する場合がございます。またこれらのリンクを取得しま空白のページに何もないので、javascript私の場所にバーがあります。しかし、これはsidestepped少によるonlick.

一ることに気付いたので利用の場合は、"href"javascript:

のスクリプトの"target"属性になれば、精密位置決めスイッチの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>

再クローム(ダブルクリック）は、IE11（トリプルクリック）.クロムをクリックすれば十分速く、余裕があります。できる10をクリックしてみ1機能を実行します。

Firefoxの動作ok。

 <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>

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

それは、ユーザーがリンクをコピーすることができますので、

まず、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を経由して）新しいリンクでロードすることができるということです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top