☰

要素を右クリックしたときにコンテキストメニューが開かないようにする 質問する

tag-icon • tag-icon javascript html css
要素を右クリックしたときにコンテキストメニューが開かないようにする 質問する

ユーザーが要素を右クリックしたときに、Web サイトにカスタム インタラクションを持たせたいのです<div class="myElement"></div>が、UX を損なわないように、要素を右クリックしたときにコンテキスト メニューもポップアップしないようにしたいです。これを実現する方法はありますか (CSS が望ましいですが、Vanilla JS でも機能します)?

希望：

.myElement {
    contextMenuOnRightClick: none,
}

ベストアンサー1

最も簡単な方法は、非常に単純な JavaScript を使用することです。

<div class="myElement" oncontextmenu="return false;"></div>
  • oncontextmenu: コンテキスト メニュー (右クリック メニュー) が表示されたときにイベントが発生します。
  • return false;: イベントをキャンセルし、メニューの表示を停止します。

さらに良いのは、インラインJS再利用可能な className を作成し.js-noMenu、右クリックを防止する要素に追加します。JS
行を Javascript ファイルに配置します。

[...document.querySelectorAll(".js-noMenu")].forEach( el => 
 el.addEventListener('contextmenu', e => e.preventDefault())
);
<div class="js-noMenu">Right click me!</div>
<p>You <b>can</b> contextmenu me!</p>
<p class="js-noMenu">You cannot here</p>

基本的にEvent.preventDefault()ブラウザがデフォルトのアクションをトリガーするのを防ぎます

おすすめ記事