JavaScriptで右クリックを制御する実験

右クリックイベントは、oncontextmenu でハンドリングできます。

onrightclick というイベント名ではありません。これは、右クリックは、2ボタンマウスの独特の操作であり、標準的に呼ぶには適さないためだと思います。例えば、スマートフォンでは、右クリックの代わりに長押しの操作が割り当てられています。共通して言えるのは、コンテキストメニューを開く操作 であるため、こう名付けられたのでしょう。

画像の右クリックイベントを取得します。次の画像を右クリックしてみてください。

右クリックイベントをハンドリングする

右クリックイベントに反応し、カウンターの数字がカウントアップされていきます。

count: 0

アラートを表示する

右クリックするとアラートが立ち上がります。

右クリックをキャンセルする

CSSのみ

CSSの touch-callout, user-select を適用した要素。

リンクあり

リンクなし

JavaScriptのみ

イベント oncontextmenu のイベントハンドラに event.preventDefault(); を実装した要素。

リンクあり

リンクなし

CSS + JavaScript

リンクあり

リンクなし

透明の要素を重ねて隠す



プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る