タグへのクリック イベントの追加に関する問題と解決策を共有する

昨日、ページジャンプを修正していて問題が発生しました。 a タグの "href" 属性が空の場合、次のようにしますModify、変更リンクをクリックすると、対応する変更ページにジャンプせず、をクリックしても全く反応がありません。その後、同僚と話し合った結果、javascript:void(0)" onclick="roleupdate()">Modify、つまり追加に変更されていることがわかりました。 「href」属性の「javascript:void(0)」や「#」でページジャンプが実現できるので、「a」タグの「href」属性値は空にすべきではないと個人的には思います。

誰でも簡単に学習できるように、以下に示すように、「a」タグで click event を使用するいくつかの方法をまとめました:

<a href="JavaScript:js_method();"</a>

これは私たちのプラットフォームで一般的に使用される方法ですが、これはメソッドがこれを渡せないなどです。パラメータを使用するときは間違いが起こりやすく、javascript: プロトコルが a の href 属性として使用されると、window.onbeforeunload イベントが不必要にトリガーされるだけでなく、 IE での GIF アニメーション画像の再生を停止します。 W3C 標準では、href

<a href="javascript:void(0);" onclick="js_method()"</a>

で JavaScript ステートメントを実行することは推奨していません。このメソッドは、多くの Web サイトで最も一般的に使用されているメソッドであり、最も包括的なメソッドでもあります。onclick メソッドは jsfunction の実行を担当し、void は 演算子です。 , void( 0) 未定義を返し、アドレスはジャンプしません。また、このメソッドは最初のメソッドのように js メソッドをブラウザのステータス バーに直接公開しません。

3.<a href="javascript:;" onclick="js_method()"</a>

このメソッドは 2 つのメソッドに似ていますが、唯一の違いは空の js コードが実行されることです。

4.<a href="#" onclick="js_method()"</a>

このメソッドもインターネット上で非常に一般的なコードです。 # は、top の役割を表すタグに組み込まれたメソッドです。したがって、このメソッドを使用して Web ページをクリックすると、ページの先頭に戻ります。

5.<a href="#" onclick="js_method();return false;"</a>

このメソッドは、クリックして js 関数を実行した後、false を返します。ページはジャンプせず、実行後もページの現在の位置に留まります。

タオバオのホームページは 2 番目の方法を使用していますが、アリババのホームページでは 1 番目の方法が使用されています。私たちのホームページとの違いは、各 href の JavaScript メソッドが try と catch で囲まれていることです。

【関連おすすめ】

1. 無料のHTMLオンラインビデオチュートリアル

2. HTML開発マニュアル

3.

以上がタグへのクリック イベントの追加に関する問題と解決策を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。