ホームページ > 記事 > ウェブフロントエンド > HTML の a タグでの href と onclick の使用の違いと優先順位

HTML の a タグでの href と onclick の使用の違いと優先順位

不言オリジナル: 2018-06-09 17:01:102247ブラウズ

この記事は、HTML A タグにおける href と onclick の使用法、違い、優先度についての記事を主に共有しています。詳細を知りたい人は参照してください。

属性があるため、IE6 は hover に応答しません。ダブルクリックすると、ラベルの代わりにラベルの親コンテナが選択されます (この問題は IE で発生します)。

コードは次のとおりです

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">

この要素を取得する必要がある fn メソッドがあるとします。最初のメソッドによって渡される this は null 値です。

ということで、よりおすすめの書き方は

コードは以下の通りです

<a href="javascript:void(0)" onclick="fn(this)">

以下のコードはsubgo()関数を実行します

コードは以下の通りです

<a href="javascript:void(0)" onclick="subgo()">点我</a>

ここでは、javascript:void (0)、実体は有効ではありません。関数は単なるデッドリンクであり、実行される関数は subgo() です。

コードは次のとおりです

点我与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

実際、 #contains には位置情報が含まれており、デフォルトのアンカーは #top であり、これは Web ページの上部であり、javascript:void(0) は情報のないデッドリンクのみを表します。。したがって、スクリプトを呼び出すときは void(0) を使用するのが最善です

href は一般的に URL アドレスを指しますが、href="javascript:xxx();" などの JavaScript を呼び出すこともできます。ドキュメントでは次のように記述することを推奨しています。 :

コードは次のとおりです

<a href="http://www.jb51.net/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>

ただし、このメソッドは、複雑な環境で奇妙な問題を引き起こすことがあります。A の href 属性として javascript:protocol を使用しないようにしてください。これにより、window.onbeforeunload イベントが不必要にトリガーされるだけではありません。、ただし、IE では GIF アニメーションが発生し、画像の再生が停止します。

リンクの onclick イベントが最初に実行され、続いて href 属性でのアクション (ページジャンプ、または JavaScript 擬似リンク) が実行されることがわかっています。href 属性でのアクションを実行したくない場合は、onclick で次のようにする必要があります。通常は onclick="xxx();return false;" のように書きます。

TabPane の JS ソースコードでは、onclick が FALSE を返さないため、IFRMAE で TABPANE を閉じると、href が実行され、ページが表示されます。表示の問題。解決策は、TAB を使用して次のコードを JSP にコピーすることです。

HTML A タグで href と onclick を同時に使用する優先順位

1 順序

ie 6: href は最初に onclick をトリガーし、次にトリガーをトリガーします

他のブラウザーは、最初に onlick をトリガーし、次に href をトリガーします

2 href="javascript: xxx()"

これをパラメータとして渡すことはできません

onclick can

コードは次のとおりです

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this);">

3 最初にトリガーされたメソッドが false を返す場合、後のイベントはトリガーされません

たとえば、

コードは次のとおりです

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this); return false;">

ee7959cc8dd4be16ef633321c03dac32 により、ページがブックマークの位置に配置されます

理由 1 と 4 による

両方とも IE6 2b9b79db84a5faa65e8578aabd48c599 次の例のように。

1回目と2回目のクリックでhrefにアクセスし、3回目以降は別のアドレスにアクセスするにはAが必要です

コードは次のとおりです

var href=0
function clicka(obj)
{
 if (href==2)
 {
 obj.href="http://www.baidu.com?qc";
 }else
 {
 href++;
 }
 return true;
}
 <a href="http://www.jb51.net/" target=_blank id="showa" onclick="clicka(this)"> 开屏高速下载 </a>

aタグのhrefとonclickでJavaScriptを使用する場合の違いリンクの onclick イベントが最初に実行され、続いて href 属性の下のアクション (ページジャンプ、または JavaScript 疑似リンク) が実行されます。

アクションが必要な場合は、リンク内に href と onclick の両方があると仮定します。 href 属性が実行されない場合、onclick は false の戻り値を取得する必要があります。信じられない場合は、goGoogle 関数で return false をコメントアウトしてください。ページが長すぎてスクロールバーがあり、リンクの onclick イベントを通じて操作を実行したい場合は、その href 属性は # ではなく javascript:void(0); に設定する必要があります。これにより、不要なページジャンプを防ぐことができます。

戻り値を持つ関数がリンクの href 属性で呼び出された場合、現在のページのコンテンツはShift キーを押したままにすると、この関数の戻り値に置き換えられます

。

今日遭遇した問題は、IE6.0でhref形式でparentNodeにアクセスできないことです。

A の href 属性として javascript:protocol を使用しないようにしてください。これにより、window.onbeforeunload イベントが不必要にトリガーされるだけでなく、IE での GIF アニメーション画像の再生が停止されます。

それで、私はこれに多くの時間を費やしました。

【理由】

CheckBoxListコントロールを使用する際、各チェックボックスの後にリンクを追加する機能を実装したいのですが、いくつかの機能を実装するにはリンクをクリックするだけでなく、チェックボックスを選択する必要もあります。

コードは以下の通り

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label中的链接]</a></label>

最終的にparentNodeを使って実装します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

HTML の a タグでの href と onclick の使用の違いと優先順位

関連記事