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

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

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

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

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

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

count: 0

アラートを表示する

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

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

CSSのみ

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

リンクあり

リンクなし

JavaScriptのみ

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

リンクあり

リンクなし

CSS + JavaScript

リンクあり

リンクなし

透明の要素を重ねて隠す




プロフィール

ときにはデザイナ、ときにはディレクタ、ときにはプログラマ、ときには何でも屋と、ウェブの世界で未熟ながらもいろいろやっている、コヤナギトモヤです。

ツイッター上ではこのヒト。
@tomk79

RSSフィード

ページの先頭へ戻る