リダイレクトせずにクリックで単純なJavaScript関数を実行したいです。
JavaScript呼び出しをhref
属性に入れることの間に違いや利点はありますか?
<a href="javascript:my_function();window.print();">....</a>
)それをonclick
属性に入れること(onclick
イベントにバインドすること)に対して?
オンクリックをhref内に置くことは、内容と行動/行動との分離を強く信じる人々を怒らせるでしょう。その理由は、あなたの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 に関しては、this
name__ハンドラーのonclick
name__キーワードは、そのonclick
name__属性を持つDOM要素(この場合は<a>
要素)を参照するのに対して、this
name__属性はhref
name__属性を参照します。 window
name__オブジェクトに追加します。
presentation に関しては、リンクにhref
name__属性がない場合(つまり<a onclick="[...]">
)、デフォルトでは、ブラウザはtext
name__カーソルを表示します(ただし、通常は望まれるpointer
name__カーソルは表示されません)。 <a>
はアンカーであり、リンクではありません。
behavior の観点から、href
name__を介したナビゲーションでアクションを指定する場合、ブラウザは通常、ショートカットメニューまたはコンテキストメニューを使用して別のウィンドウでそのhref
name__を開くことをサポートします。 onclick
name__を介してのみアクションを指定する場合、これは不可能です。
しかし、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>
私が使う
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>
これを行うための最良の方法は、
<a href="#" onclick="someFunction(e)"></a>
問題は、ブラウザのページのURLの最後にハッシュ(#)が追加されるため、ユーザーが戻るボタンを2回クリックして自分の前のページに移動する必要があることです。これを考慮して、イベント伝播を停止するためのコードを追加する必要があります。ほとんどのJavascriptツールキットには、すでにこの機能があります。例えば、dojoツールキットは
dojo.stopEvent(event);
そうするには。
ここに加えて、hrefはブラウザのステータスバーに表示され、onclickは表示されません。 JavaScriptコードをそこに表示するのはユーザーフレンドリーではないと思います。
それは私のためにこのコード行を使ってうまくいきました:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
スクリプティング専用ではない属性にjavascript:
を含めることは、HTMLの古い方法です。技術的には機能しますが、それでもJavaScriptのプロパティをスクリプト以外の属性に割り当てています。これはお勧めできません。古いブラウザや最近のブラウザでさえ失敗することさえありえます(googledフォーラムの投稿はOperaが 'javascript:'のURLを好きではないことを示しているようです)。
より良い方法は、JavaScriptをonclick
属性に入れるという2番目の方法です。スクリプト機能が利用できない場合は無視されます。 JavaScriptを持っていない人のための代替として、hrefフィールドに有効なURL(通常は '#')を入力してください。
この作品
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
一番上の答えは非常に悪い習慣です。問題が発生する可能性があるため、空のハッシュにリンクしないでください。
他の多くの人が言っているように、イベントハンドラーを要素にバインドするのが最善ですが、<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);"
を含める必要があります。
個人的には、JavaScriptの呼び出しをHREFタグに入れるのは面倒です。私は通常、何かがJavascriptリンクであるかどうかにはあまり注意を払いません。そして、しばしば新しいウィンドウでものを開くことを望みます。これらの種類のリンクのいずれかを使用してこれを実行しようとすると、何も表示されていない空白のページとロケーションバーにJavaScriptが表示されます。しかし、これはonlickを使用することによって少し回避されます。
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は問題なく動作します。
<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>
まず、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経由で)ロードできることです。
メールフォルダがURLを表示するように設定されているOutlookのWebページ機能にページが埋め込まれていると、javascript:hrefが機能しないことを経験しました。