検索
ホームページウェブフロントエンドhtmlチュートリアルHTML の a タグでの href と onclick の使用の違いと優先順位

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

4

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

5

理由 1 と 4 による

両方とも IE6

6 要約:

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

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

コードは次のとおりです

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

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 属性を使用して相対パスと絶対パスを指定する方法の説明


以上がHTML の a タグでの href と onclick の使用の違いと優先順位の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScript:例と実用的なアプリケーションHTML、CSS、およびJavaScript:例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?Lang属性をタグにどのように設定しますか?なぜこれが重要なのですか?May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1)ラング属性をタグに設定します。 2)多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3)「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか?HTML属性の目的は何ですか?May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか?HTMLでリストを作成するにはどうすればよいですか?May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists:1)forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2)

HTMLアクション:Webサイト構造の例HTMLアクション:Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1)Webサイト構造などのタグを使用し、定義します。 2)例は、ブログとeコマースのウェブサイトの構造を示しています。 3)誤ったラベルネスティングなどの一般的な間違いを避けてください。 4)HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか?HTMLページに画像を挿入するにはどうすればよいですか?May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1)usealttextforaccessibilityandseo.2)emplencesrcsetForresponsiveimages.3)applylazyloadingwithloading = "lazy" tooptimizeperformance.4)

HTMLの目的:Webブラウザがコンテンツを表示できるようにするHTMLの目的:Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか?Web開発にとってHTMLタグが重要なのはなぜですか?May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1)theydefineLayout、semantics、and-interactivity.2)semanticagsimprovecessibility.3)opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。