☰

JavaScript リンクには、どの「href」値を使用すればよいですか。「#」または「javascript:void(0)」? 質問する

tag-icon • tag-icon javascript html performance optimization href
JavaScript リンクには、どの「href」値を使用すればよいですか。「#」または「javascript:void(0)」? 質問する

以下は、JavaScript コードを実行することのみを目的としたリンクを構築する 2 つの方法です。機能性、ページの読み込み速度、検証目的などの点から見て、どちらが優れているでしょうか?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

または

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

ベストアンサー1

私が使うjavascript:void(0)。

#理由は 3 つあります。開発者チーム内での使用を奨励すると、必然的に、次のように呼び出される関数の戻り値を使用するようになります。

function doSomething() {
    //Some code
    return false;
}

しかし、return doSomething()onclick で を使用することを忘れて、 だけを使用しますdoSomething()。

回避すべき 2 番目の理由は、呼び出された関数がエラーをスローすると#final がreturn false;実行されないことです。したがって、開発者は呼び出された関数でエラーを適切に処理することも忘れてはなりません。

3 つ目の理由は、イベント プロパティが動的に割り当てられる場合があることですonclick。私は、特定の添付方法または別の添付方法のために関数を具体的にコーディングせずに、関数を呼び出したり、動的に割り当てたりできることを好みます。したがって、私のonclick(または他の) HTML マークアップは次のようになります。

onclick="someFunc.call(this)"

または

onclick="someFunc.apply(this, arguments)"

を使用すると、javascript:void(0)上記のすべての問題が回避され、欠点の例は見つかりませんでした。

したがって、単独の開発者であれば、明らかに独自の選択を行うことができますが、チームとして作業する場合は、次のいずれかを述べる必要があります。

を使用しhref="#"、onclick常に がreturn false;末尾に含まれていること、呼び出された関数がエラーをスローしていないこと、また、関数を プロパティに動的にアタッチする場合は、onclickエラーをスローしないだけでなく が返されることを確認してくださいfalse。

または

使用href="javascript:void(0)"

明らかに、2 番目の方法の方がコミュニケーションがはるかに簡単です。

おすすめ記事