JSではなくCSSで右クリック禁止
JavaScriptを使用して画像などの右クリックを禁止しているサイトをいまでも見かけることがあるが実はCSSのpointer-events:noneを使用すれば同様に右クリックを禁止することができる。
.disabled {
pointer-events: none;
}
JavaScriptによる無効化はブラウザのJavaScriptをオフにされると回避されてしまうがCSSの場合はブラウザのCSSをオフにするとサイトの表示が崩れてしまうためJavaScriptのように無効化されることが少ない。
CSSのpointer-events:noneは右クリック禁止ではなくマウスイベントのターゲットになることを無効化する記述なので画像の右クリックだけでなくドラッグなども無効化される。
JavaScriptの右クリック無効化だと画像をドラッグしてブラウザのタブで開くことが可能だがpointer-events:noneを使用した方法だとドラッグで開くことも無効化できる。
この記事のトップにある「シャコの寿司」の画像にはpointer-events:noneが指定されているので画像を右クリックやドラッグできなくなっている。
ブログサービスでも使用可能
CSSを使用した方法なのでこの方法ならJavaScriptが禁止されていることが多いブログサービスでも右クリック無効化を簡単に実装できる。(アメーバブログやライブドアブログなど)
