知らなきゃ絶対損するPCマル秘ワザ
『月,水,金』の週3回更新!(予定)

こんにちは、さち です。
先日、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);
見た目はこんな感じです。

レスポンシブデザインモードだとアラートが出ない
レスポンシブデザインモードでないときは
ちゃんとアラートが出るので、コードに問題はありません。

場合によっては、alert() の部分で処理が中断されてしまい
それ以降のコードが実行されないこともあります。
今回の例は、「OK」をクリックするだけの alert() なので
不具合とはいえ、大きな支障はないですが
実は、confirm(), prompt() でも同様の症状が出ます。
本来、confirm() では「OK/キャンセル」の選択が行われますが
勝手に「キャンセル(false)」が送られてしまいます。
「OK」のときの動作テストができないので面倒です。
ちなみに、新規作成したプロファイルでも不具合が出たので
アドオンやその他の設定が原因である可能性は低いです。
すでに2年前から確認されているようですが、今も放置されています。
Developer Edititon(Firefox 61) でも直っていないですし
今後も放置され続ける可能性が高そうですね……。
スマホ用サイトの動作テストには Chrome を使った方がいいかもしれません。

| ホーム |