HTML の a タグでの href と onclick の使用の違いと優先順位-htmlチュートリアル-php.cn

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

不言

リリース： 2018-06-09 17:01:10

オリジナル

2745 人が閲覧しました

この記事は、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;">

ログイン後にコピー

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

理由 1 と 4 による

両方とも IE6

6 要約:

1) これをメソッドパラメータとして渡す必要がない場合は、単に href="JavaScript: "を使用することをお勧めします

2) このパラメータを使用する必要がある場合、お勧めです

コードは次のとおりです

<a href="javascript:void(0);" onclick="doSomthing(this)" > 次の例のように。

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 サイトをご覧ください。