JavaScriptのタッチ操作ではまる。マウスイベントとタッチイベント、Bootstrapのhoverとか。

Flatkeyboardwebmidibrowser
　iOSでWeb MIDI APIが使えるようになった。Web MIDI Browserによって。ということで、プログラミングを久々に再開。PC上では動くようになったので、iOSで試してみる。反応が遅い。jQueryのせいかと思ったのだけど、そうではなく、.clickで発火させていたからだった。プログラムのタッチ対応が必要。そこでいろいろ試行錯誤。
　参考にしようとしたのは、Ryoya KAWAIさんが公開している「flatkeyboard.js」。以前試した際には、タッチイベントとマウスイベントの両方が発生するWindows 8のChromeでうまくいかず、無理やりな対処をしたのだったけど、今回、改めてチェックすると、それへの対処がすでになされていた。ラッキー。ありがとうございます。しかし、コードを読んでもいまいち理解できず。圧倒的な自分のスキルのなさを再確認。
　自分で作ったコードにあまり手を入れずになんとかできるものがないかと探したら、これを発見。
　【jQuery】コピペOK！タッチ操作とマウス操作の動作定義をまとめる | ユガラボ
　最小限の修正でうまく動いた。すばらしい！ありがとうございます。
　で、動作はするようになったのだけど、表示周りで別の問題が発生。Bootstrapを使ったのだけど、PCとスマホで表示が違う。というか、マウス操作とタッチ操作で挙動が異なる。問題はhover。PCではhoverで色が変わる。マウスカーソルを外すと色が戻る。タッチだと、hoverないのだけど、タッチした時に色が変わる。離しても変わったまんま。別のボタンを押すとそちらが色が変わり、さっきタッチしていたボタンの色が戻る。そんな感じ。むむう。
　ということで、別途classを指定してそれで制御する方向に。しかし、元の擬似クラスhoverが存在するので、うまいこといかない。jQueryではhoverなどの擬似クラスは制御できないということを知る。
　CSSの疑似クラスは非DOM。JavaScript/jQueryで直接操作は不可能。style要素の動的変更で対処せよ – プログラミングとIT技術をコツコツ勉強するブログ
　ということで、cssにて:hoverを上書き。hoverで色が変わるのをやめる。というか、hoverした際に、元の色になるように。オリジナルのbootstrapのcssファイルにてを付けずに、別のcssファイルを作成してそれで。今後、なんらかの差し替えがあったときに最小限の修正で済ませられるようにとの目論見。もっとスマートな方法があるんだろうけど、今の自分ではここまでしかできない。
　このほか、ボタンまわりを操作している際にスクロールしない技などもいろいろ調べる。IEのみのやつだとcssで-ms-touch-actionとかtouch-actionで、指定できたりするのだけど、そうでない場合はやっぱりイベントを見てpreventDefaultとかする必要があったりとか。そのへんも今回初めて知った。
　で、これで思った通りの動きになった。イベントリスナー的なものがいっぱいになったので、動作が遅くなってるのかもしれない（あまりわかってない）。コードもだいぶ長くなってしまった。もう少し何とかならないかと、再度、flatKeyboard.jsのコードを眺める。わからない部分をいろいろ検索しながら調べていくと、たまたまこんなのを発見。
　jquery – Javascript click and mousedown conflicting – Stack Overflow
　フラグを用意して、それで判断するという方法。短いコードでサンプルが出ているので、わかりやすかった。あらためて、flatKeyboard.jsを見たら、何をしようとしているかがわかってきた。
　こらからこれでもう一度やってみようと思う。メモ。