JavaScript - コンテキストメニューを非表示にする

JavaScriptで右クリックした時のコンテキストメニューを非表示にする簡単なコード例です。

HTMLには、右クリックする対象として<div>タグにid名「target」を指定しています。

<div id="target">このエリアではコンテキストメニューは表示されません。</div>

CSSでは、クリックの対象とするためのサイズを設定しています。
クリックする回数を表示するためのテキストプロパティを指定。
「cursor: pointer」でホバー時のマウスカーソルを指にしています。

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: 1s;
	font-size: 20px;
	background: #0000cd;
}

コンテキストメニューを表示しないようにする要素をquerySelector()で指定、addEventListener()を使って右クリックイベントを実装します。
preventDefault()を指定する事でブラウザがデフォルトで実行するコンテキストメニューを開かないようにしています。

// 右クリックイベントを実装
document.querySelector('#target').addEventListener('contextmenu', () => {
	// コンテキストメニューを表示しない
	event.preventDefault();
});