JavaScript - buttonタグでリンク動作をしないようにする

JavaScriptで<button>タグでリンク動作をしないようにする方法と簡単なコード例です。

HMLには2つのボタン要素を設置しています。
Button AはJavaScriptの「preventDefault()」でリンク動作を実行しないようにしていますが、Button BはHTMLで「type="button"」を指定する事でリンク動作を実行しないようにしています。

<button id="btn-a">Button A</button>
<button  type="button"  id="btn-b">Button B</button>

addEventListener()でボタンをクリックした時のイベントを実装しています。

リンク動作を実行しないようにするには、event.preventDefault()でデフォルトの動作を実行しないようにします。

コード例では、ボタンクリックによりイベントを実行した時にコンソールログに表示しています。

// ボタンをクリックした時のイベント
document.querySelector('#btn-a').addEventListener('click', () => {
	// デフォルトの動作を実行しない
	event.preventDefault();

	console.log('click')
		
});