こんにちは、さち です。
先日、Firefox のレスポンシブデザインモードを使って
スマホ用サイトの動作テストをしていました。
しかし、alert() によってダイアログが出るはずのところで
何も起きないという問題が発生。
コードに問題があるのかと思い見直しましたが
タイプミスなどは見つかりません。
どゆこと?
サンプルページの作成
ボタンをクリックするとアラートが出て、背景色がオレンジに変化します。
<div> <button>かーん!かーん!</button> </div>
var body = document.getElementsByTagName('body')[0]; var button = document.getElementsByTagName('button')[0]; button.addEventListener('click', function() { alert('み・か・ん!'); body.style.backgroundColor = 'orange'; }, false);
レスポンシブデザインモードだとアラートが出ない
- レスポンシブデザインモード(Ctrl + Shift + M)にして、ボタンをクリック。
- しかし、アラート(ダイアログ)は出ません。
アラートの処理をすっ飛ばして背景色がオレンジになってしまいました。
レスポンシブデザインモードでないときは
ちゃんとアラートが出るので、コードに問題はありません。
場合によっては、alert() の部分で処理が中断されてしまい
それ以降のコードが実行されないこともあります。
今回の例は、「OK」をクリックするだけの alert() なので
不具合とはいえ、大きな支障はないですが
実は、confirm(), prompt() でも同様の症状が出ます。
本来、confirm() では「OK/キャンセル」の選択が行われますが
勝手に「キャンセル(false)」が送られてしまいます。
「OK」のときの動作テストができないので面倒です。
ちなみに、新規作成したプロファイルでも不具合が出たので
アドオンやその他の設定が原因である可能性は低いです。
すでに2年前から確認されているようですが、今も放置されています。
Developer Edititon(Firefox 61) でも直っていないですし
今後も放置され続ける可能性が高そうですね……。
スマホ用サイトの動作テストには Chrome を使った方がいいかもしれません。
コメント