iPhone(Safari)でorientationchange内でのイベント登録がうまくいかない

Question

実現したいこと・発生している問題

デバイスの方向変換を感知して、横向きの場合にwindowに対してタッチイベントを発生させようとしています。

しかし、向きを判定するところまではうまくいくのですが、そのあとのイベント登録がうまくいきません。
初期状態を縦とした場合、その後横にすれば処理が発生するはずなのですが動かず、
再度縦→横と繰り返すと処理が走るようになります。

これがPC(Chrome)の検証モードだとうまくいくのですが、実機(iPhone-safari)で確認すると上記のような現象になります。。

ちなみに、縦状態の際にイベントを削除したいのですが、その処理を入れると全く動かなくなります。。

該当のソースコード

var orientation = Math.abs(window.orientation);

window.addEventListener("orientationchange", function(){
  // orientation値を更新
  orientation = Math.abs(window.orientation);
  if ( orientation === 90 ) {
    // ヨコ表示
    window.addEventListener("touchstart", function(){
      console.log("touchstart");
    }, false);
  }
}, false);

試したこと

1回目の回転時も、if文の中まで通っていることは確認しました。ちゃんと方向の感知はできています。
（初期状態が横の場合の処理も必要ですが、今は考えなくてよいです。）

補足情報（FW/ツールのバージョンなど）

端末：iPhoneSE/iOS11.4.1
確認ブラウザ：Safari11.0
Webインスペクタで動きを確認しています。

Answer 1

こうしてしまうとか。

window.addEventListener("touchstart", function(){
    if ( Math.abs(window.orientation) !== 90 ) return;
    console.log("touchstart");
}, false);

Comments

[yuuu02]

kei334さん
おおお！動きました…！！！
回転の判定を先にするのと、何が違うんでしょうか。。

[kei344]

詳しくはわかりませんが、orientationchangeは回転を検知するたび動く（スクロールイベントとかと同じような）イベントだと予想。その場合その中でイベントを付与するのは（大量に同じイベントを登録してしまうことになるなど）エラーの元になることがあります。

私の経験則として「イベントの中でイベントを登録する際には注意が必要」というものがあるので、イベントリスナーを減らす方向で回答しました。

[colling]

なるほど！

[yuuu02]

なるほど！勉強になりました…！
実は理由があって、スクロールイベントをscrollを使わず自作で作る必要があって、touchstart→touchmove→touchendという流れでイベント処理をしなければならなかったので、方向の判定を先にしていたんです。

ちょっと冗長になってしまいそうですが、アドバイスいただいた方向で作り直してみようと思います。
お二方、本当にありがとうございました！助かりました！

Answer 2

デバイスの向きは0度 90度 -90度 で返ってきますので、
if (Math.abs(window.orientation) === 90) {にしてみてはどうでしょう？
（未検証ですが、、。）

*ndroidは180度（逆さま）が返ってきますが、iPhoneのブラウザは逆さまにはなりません。

--追記--
ひとつ手前でやってましたね、、。見逃してました。スイマセン。

---

--追記--
これで、一回目の横向きからタッチイベントが取れます。

	<script>
	function readDeviceOrientation() {
	    if (Math.abs(window.orientation) === 90) {
	        // 横向き
					window.addEventListener("touchstart",function(){
						alert('touchstart');//イベント確認
		 				console.log("touchstart");
	 }, false);
	    } else {
	    	// 縦向き

	    }
	}
	window.onload = readDeviceOrientation;
	window.onorientationchange = readDeviceOrientation;
	</script>

---

--追記--
イベントリスナー削除つき

	<script>
	function touchOn(){
		alert('touchstart');//イベント確認
		console.log("touchstart");
	}
	function readDeviceOrientation() {
		if (Math.abs(window.orientation) === 90) {
			// 横向き
			window.addEventListener("touchstart",touchOn);
		} else {
			// 縦向き
			window.removeEventListener("touchstart",touchOn);
		}
	}
	window.onload = readDeviceOrientation;
	window.onorientationchange = readDeviceOrientation;
	</script>

Comments

[yuuu02]

collingさん
コメントありがとうございます。
ご提示いただいたように実装しているのですが、なぜかiPhoneだとダメですね。。
collingさんに記載いただいているソースを使っても同じでした。。

onorientationchangeとEventListenerの組み合わせでバグが起きてるんでしょうか。。
原因がはっきりしないので対処が難しいです＞＜

[colling]

あら？こちらもiPhoneでのチェックしかしてませんが動いてます。

[yuuu02]

iPhoneのOSやブラウザのバージョンとかってわかりますか？

[colling]

iPhone6S ですが、ブラウザのバージョンはどこで見るんすかね？これ

[yuuu02]

できればiOSのバージョンが知りたいです！iPhoneの設定＞一般＞情報に記載されてます。
ブラウザのバージョンは端末内ではわからないので、以下サイトにアクセスすれば表示してくれますよ！
https://aprico-media.com/ua

[colling]

iOS 12.0.1 ブラウザは、、、Safariの最新だと思います。

[yuuu02]

ありがとうございます！参考にして、もう少し検証してみたいと思います＞＜
コメントありがとうございました！！

[colling]

safari 12.0 でした

[colling]

他に影響がありそうなscriptは混在していませんか？

[yuuu02]

collingさんにいただいたソースのみで検証しているので混在はしていません。
いま、端末を複数台集めてきて検証してみたのですが、元々検証に使用していたiPhoneSE以外ではちゃんと動きました…！！ちゃんと同じソースで確認しています。。
iOSやsafariのバージョンの条件が全く同じものもありますが、なぜか動くものと動かないものがあります。。

とりあえずコードに問題がないようで良かったです。
実機に問題があるようなので、もう少し原因を探ってみようと思います。

[colling]

もし、iPhoneの設定やブラウザの設定による問題を避けたいのであれば、deviceorientではなくてinnerHeightとinnerWidthの差を判断する処理にすれば良いのでは？

[yuuu02]

回転判定部分は判別できているので、addEventもしくはタッチイベント部分が問題あるような気がします…????

[colling]

>元々検証に使用していたiPhoneSE以外ではちゃんと動きました

初歩的な、キャッシュクリアという手段はどうでしょう？

[yuuu02]

キャッシュクリアしてみましたけど、ダメですね。。
横の状態でスタートするとイベントが発生するんですが、そこから縦→横と動かすと発生しなくなります????
発生しなくなるということは、ちゃんとイベント削除は作用しているようですが、そこから再度イベント登録でつまづいてる感じですかね。。

縦スタートだとまったく動かないので、そこにヒントがありそうなんですが。。

[colling]

検証用のiPhoneSEはiOSバージョンやブラウザバージョンが他端末と違うのでしょうか？

[colling]

iOS11では回転検知のバグがあるみたいですね。
https://saintlad.com/screen-rotation-bug-with-iphone-on-ios-11/
上記サイトに書いてあるように controll screen を開いて 回転アイコンをon off してみるとどうでしょうか？

[yuuu02]

やはり回転周りのバグではなさそうですね。イベント関連で何かありそうです。
ちなみに、他検証機で全く同じOS&バージョンのiPhoneXがあるのですが、そちらでは動きました。。
色々アドバイスいただきありがとうございます????