htmlのタグのonclickとhrefの実行順序を詳しく解説

onclick イベントが最初に実行され、次に href で定義されたイベント (ページ ジャンプまたは JavaScript) が実行されます

同時に 2 つの定義がある場合 (onclick と href の両方が定義されている場合)、href アクションを阻止したい場合は、 onclick Return false; を追加する必要があります。通常は、onclick="xxx();return false;" と記述します。

href で定義された関数に戻り値がある場合、現在のページのコンテンツは戻り値に置き換えられます

ページが長すぎる場合は、スクロールバーが表示され、リンクの onclick イベントを介してアクションを実行する必要があります。その href 属性は # ではなく javascript:void(0); に設定する必要があります。これにより、不必要なページジャンプを防ぐことができます

<a href="javascript:void(0)" onclick="fn(this)"> 
<a href="javascript:void(0);" onclick="javascript:goUrl(&#39;http://www.sina.com&#39;);return false;">跳转3</a>
<a href="javascript:void(0)" onclick="subgo()">点我</a>

ここでは、 javascript:void(0 ) を使用します。実際の関数はありません。これは単なるデッドリンクであり、実行される関数は subgo() です。

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

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

を使用するのが最善であり、href="javascript:xxx();" のように JavaScript を呼び出すこともできます。ドキュメントでは次のようになります: 8e66c89390cf65b574b300277bf63f17xx5db79b134e9f6b82c0b36e0489ee08ed ただし、このメソッドは複雑な環境で奇妙な問題を引き起こすことがありますので、使用しないでください。 javascript:protocol を A. の href 属性として使用すると、 window.onbeforeunload イベントが不必要にトリガーされるだけでなく、IE でアニメーション GIF 画像の再生が停止します。

このようなリンクをクリックすると、2 つの状況が考えられます。 1. dosomthing が true を返した場合、ブラウザは Cool.html にジャンプします。 逆に、false を返した場合、href は無視されます。この機能を利用して、次のようなコードを書くことができます...

<a href="cool.html" onclick = "doSomething()">做点什么吧</a>
function doSomething(){
return confirm("您确认要离开吗");
}
function doSomething(){
var ret = confirm("确认要离开吗?");
if(ret){
window.loaction.href = "cool.html";
}
}

以上がhtmlのタグのonclickとhrefの実行順序を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。