:active疑似クラスは右クリックでも適用する?しない?

今やってるプロジェクトでは、ボタンやら画像やらがあるウェブアプリを作っているのですが、先日お客さんから右クリックしてもコンテキストメニューがでないようにしてほしいとお願いされました。

ようは、画像を簡単に保存できないようにしてほしいとのことなのですが、そんなの簡単に解除できるのだけどと思いながら、下記のスクリプトを追加して右クリックしてもコンテキストメニューがでないように修正しました(参考:JavaScriptによる右クリックの禁止・禁止を解除する方法 – Qiita)。

document.oncontextmenu = function () {return false;}

簡単な変更ですが、設定したからには簡単な動作確認はしないといけません。ブラウザを開いて画像の他、適当な箇所を右クリックしてコンテキストメニューがでないかどうかChromeで確認しました。その時に、「あれ?」と思った箇所が一つ。

上記のアプリは、「+1」というボタンをクリックすると丈夫の数字をカウントアップするようにしてあるのですが、この「+1」のボタンにはactive疑似クラスを付けてクリック時にスタイルを変えるようにしています。そうすると、カウントアップは左クリックでしか行わないのに、スタイル自体は右クリックをしたときもactive疑似クラスのスタイルが適用されてしまいました。IEでもEdgeでも試したのですが、同じように右クリックでも適用されました。

今まで長いことCSSを書いてきて、もちろんactive疑似クラスも何回も使ってきたのですが、右クリックでも適用されるということを今になって初めて気づきました……。

そんな仕様だったのかと思い、試しにMDNを見ると下記のような記述が。

複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。

あれ? MDNには「一番左のボタンにのみ適用しなければならないと定義」と書いてあります(いやいや、そんなはずはない。右クリックしても適用されたぞ)。

いろいろ調べてみると、stackoverflowに下記の投稿が。
css “:active” with right click, inconsistencies with browser implementation – Stack Overflow

英語は苦手なのでGoogle翻訳して読んだのですが、やっぱりChromeやIEはCSS3の仕様に則っていないそうです。Firefoxは仕様にのっとっているらしく、確かにFirefoxで右クリックしてもactive疑似クラスのスタイルは適用されませんでした。ただし、CSS2.1の仕様では、左のボタンのみとは書かれてなかったので、右クリックでも適用されるのは間違ってなかったそうです。

ちなみに、今やってるプロジェクトでは、右クリックしてもスタイルが変更してしまうのはダメだろうということで、JavaScriptでクリックした時にクラスを追加してスタイルを変更するという処理を入れることになりました……(泣)。

コメント

タイトルとURLをコピーしました