【javascript】ハイブリッドアプリでiosでマップを動かしたときにページごとスワイプしてしまう問題の対処法

ハイブリッドアプリを開発している時によくありがちなosの問題にハマりました。androdとios、やはりjavascriptで開発していると

プラグインでの動作やレイアウトに多少の差が生じてきます。多少だったらよかったのですが、ページ上に表示したマップを試しに

動かしてみたときにiosだけページごと地図が動いてしまうという致命的なバグを見つけてしまいました。このままではものすごく

見にくいページになってしまうのでaddEventListenerを使ってマップをスワイプしている間はページのスワイプをシャットダウン

して二重スワイプを防ぐように制御することにしました。

コードはこんな感じです。

</pre>
var eMap = document.getElementById('map');
eMap.addEventListener(
'touchmove',
function (e) {
e.preventDefault();
},
{ passive: false }
);
<pre>

最初の行でidのmapを取得。次にtouchmove、指でページを動かしたときに発火する関数です。二つ目の引数にコールバックとして

e.preventDefaultを記述。touchMoveが作用した時に常にこちらも発火するようになっています。

第三引数ではpassive:falseを設けていますが、これがないとブラウザが正常にe.preventDefaultを読み取ってくれないです。

chromeではpreventDefaultがデフォルトでtrueとなっており、この状態だと命令された動作をキャンセルせずにスルーして実行してしまう

ため、こちらでfalseとして変更してあげる必要があるみたいです。最適解ではないですが有効な一手になりうるので参考にどうぞ。