touchstart

2017-01-06

こんばんは、氷翠です。

現在、ゲームを作るための管理ツールを作成中。
それも、WEB上で管理できるようにしています。
で、もちろん、この管理は氷翠本人しかつかう予定はないので、iPadProでしか動作しないようなこともやっています。

やはりJavascriptは難しいもので、なかなかうまく動作してくれませんｗ

例えば、jqueryを利用したDOMの回転。
ただの回転ではなく、奥に向かって回転するという。
メニューはただ隠すのではなく、回転することで隠すという小技を使っています。

さらに、メニューにはサブメニューが用意されており、メニューの一つをタップするとサブメニューが表示されます。
ここまでは普通なんだけど、これが展開されなくて困ったｗ
基本的なことなんだけど、

$(document).on("click", "menu .menu-category", function() {
    処理
});

という方法を使ってやっていましたが、これだとタップしたことにならないようで、うまく動いてくれません。
そこで…

$(document).on("touchstart", "menu .menu-category", function(e) {
    e.preventDefault();
    処理
});

こうして上げるとうまくいきました。

ちなみに、

ｖar mytap = window.ontouchstart===null?"touchstart":"click";

こうして変数「mytap」を出力してあげる、もしくは条件式に組み込むことで、その端末がタップのイベントに対応しているのかどうかを調べることができます。

さらに、今回は一度タップすると、タイミングによってはサブメニューが閉じてしまうという現象が起きてしまう。
そこで、上のスクリプトにあるように、functionの中に変数「e」というのを付け足し、次の行では「e.preventDefault();」というのを加えています。
これにより、一時的にタップの動作をキャンセルする働きがあるので、その後の処理を安全に実行させることができます。