Titanium Mobileのイベントにタップとクリックがあるのはなんでなんだろう? 動きの違いを調べてみました

Titanium MobileでViewやButton等で検出できるイベントのうち、clickとsingletap、dblclickとdoubletapがあります。

スマートフォンでいう「タップ」がPCでいう「クリック」に相当するってのは今更言うまでもないのですが。なんで両方あるのかなあと。

もちろん、「クリック」といってもスマホで使えるクリックはいわゆる「左クリック」だけで、iPhoneで右クリックができるわけじゃないですし。きっとそういう微妙な違いはあるとしても言い回しくらいなもので、どちらのイベントを使っても同じなんだろうな、と思っていたんですがどうも微妙に動きが違うようなのです。

サンプルを作って試してみた

こんなラベルがあるだけのアプリを作ってみました。

20121017-tapclick1.jpg

var label1 = Ti.UI.createLabel({
text:'CHECK=',
textAlign:'center',
width:'auto'
});
self.add(label1);
label1.addEventListener('singletap', function() {
label1.setText(label1.getText() + 'T');
});
label1.addEventListener('doubletap', function() {
label1.setText(label1.getText() + 't');
});
label1.addEventListener('click', function() {
label1.setText(label1.getText() + 'C');
});
label1.addEventListener('dblclick', function() {
label1.setText(label1.getText() + 'c');
});

ラベルをシングルタップで"T"、シングルクリックで"C"、ダブルタップで"t"、ダブルクリックで"c"が追加されていくようになっています。

 

シングルタップ(シングルクリック)

20121017-tapclick2.jpg

C、Tという順でイベントが実行されたようです。つまり、click、singletapの順に実行されています。何度か試してみましたが、確実にこの順序になりました。clickの方が先に実行されると思って間違いありません。

どうもタップ?クリック?された瞬間にイベント発生するのがclickで、指が離れた瞬間に発生するのがsingletapっぽいですね。

 

ダブルタップ(ダブルクリック)

20121017-tapclick3.jpg

こちらはなんなんでしょうか(笑) とりあえず、C、c、c、Tという順でイベントが実行されたようですね。つまり、click、dblclick、dblclick、doubletapの4つのイベントが実行されています。

ダブルタップのやり方がまずかったのかと思い、何度か実行してみましたが、このイベント実行パターンしか確認できませんでした。少なくともトリプルタップしてはいないはずです。また、最初iOSシミュレータで検証していて、実質マウスによるダブルクリックによるものだったので、そのせいかな?と思ってiPhone 5に入れて実機テストもしてみたのですが、実機でのダブルタップでも変わらずでした。

最初にclickが発生するのは仕方ないにしても、dblclickが2回実行されてしまうのは意味がわからないなあ… 不具合? 仕様? 僕が試した限りでは100%これになったのでタイミングがおかしいってことはないとは思うんですが。

必ずこうなってしまうのか、ダブルクリックのタイミング次第なのかはわかりませんが、どちらにせよ、dblclickイベントが2回実行されてしまう可能性が高いので、最後に1度だけ実行されるdoubletapを使う方が安全だと思います。dblclickの使いどころが全くわからないですね。

 

正直良くわかりませんでした(笑)

というわけで、釈然としないのですが、Titanium Mobileではsingletapとdoubletapを使うようにして、click系、特にdblclickは使わないほうがよさそうだ、という結論としたいと思います。

そもそもtap系とclick系、なんで両方用意されていて、タイミングも異なっているのかなあ。少し調べただけなんですが、これについてはよくわからなかったです。JavaScript的に元々clickがあるので互換性ってことで残しているというのならわからないでもないんですが、動きが違っている説明にはならないし。

dblclickが2回実行されてしまう今の動きが正しいとして、何か使いどころあるんですかね? 詳しい方、是非教えていただければありがたいです。