hrefを省略してアンカー要素にonclickを実装

Question

a要素にonclickを実装するのが違っていますが、わかりませんどのようにイベントがどのように違うのですか？

私はa上でクリックしたときに何をしたい私はonclick eventは何もしないhrefせずに起こる持っていると思います。私の場合に使用するための適切なものである

<a href="#" onclick="myFunc()">Submit</a>
<a href="javascript:void(0);" onclick="myFunc()">Submit</a>
<a href="javascript:;" onclick="myFunc()">Submit</a>
？

Answer 1

今日のJS開発では、インラインJavaScriptが非常に嫌なので、これらの例は本当に適切なものではありません.HTML/JSの分離が最も良い方法です。

したがって、HTMLページから呼び出された別のJSファイル（<script>を</body>の直前に置き、スクリプトが実行される前にDOMが確実にロードされるようにする）でアンカーをつかんで、それぞれを呼び出すイベントリスナーを追加します対応する関数。

let anchors = document.querySelectorAll('a'); 
[...anchors].forEach(anchor => anchor.addEventListener('click', handleAnchor, false)); 

は、その後、あなたの機能で、あなたがイベントを渡すことを確認し、無効にHREFを停止する preventDefault()を呼び出します。

function handleAnchor(e) { 
    e.preventDefault(); 
    ... 
} 

MDNリソース

• querySelectorAll
• forEach