【３０日目】Titanium mobile で ScrollableView に載せた button（？）のクリック／スワイプ制御

app.js

(function(){

    var win = Ti.UI.createWindow();

    // view 1 枚目
    var view1 = Ti.UI.createView({
        backgroundColor: '#ffffbb'
    });
    // view 1 枚目にのせるニセボタン
    var button1 = Ti.UI.createView({
        top: 30,
        right: 30,
        bottom: 30,
        left: 30,
        backgroundColor: '#ffffff',
        borderColor: '#aaaaaa',
        borderWidth: 1,
        borderRadius: 10
    });
    var label1 = Ti.UI.createLabel({
        text: 'button1'
    });    
    button1.add(label1);
    view1.add(button1);

    // view 2 枚目
    var view2 = Ti.UI.createView({
        backgroundColor: '#bbffff'
    });
    // view 2 枚目にのせるニセボタン
    var button2 = Ti.UI.createView({
        top: 30,
        right: 30,
        bottom: 30,
        left: 30,
        backgroundColor: '#ffffff',
        borderColor: '#aaaaaa',
        borderWidth: 1,
        borderRadius: 10
    });
    var label2 = Ti.UI.createLabel({
        text: 'button2'
    });    
    button2.add(label2);
    view2.add(button2);

    // ScrollableView を定義、上の view 2 枚を views にセット
    var scrollable_view = Ti.UI.createScrollableView({
        views: [view1, view2],
        showPagingControl: true
    });

    win.add(scrollable_view);

    //-------------------------

    // ボタンをクリックしたかどうかのフラグ
    var clicked = false;

    // touchstart でクリックフラグを ON
    button1.addEventListener('touchstart', function(e){
        clicked = true;
    });
    button2.addEventListener('touchstart', function(e){
        clicked = true;
    });

    // touchmove（スワイプ）でクリックフラグを OFF
    button1.addEventListener('touchmove', function(e){
        clicked = false;
    });
    button2.addEventListener('touchmove', function(e){
        clicked = false;
    });

    // touchend でスワイプしてなかった場合に click イベントとして動作
    button1.addEventListener('touchend', function(e){
        if (clicked){
            alert('view2 !!!');
        }
        clicked = false;
    });
    button2.addEventListener('touchend', function(e){
        if (clicked){
            alert('view2 !!!');
        }
        clicked = false;
    });

    var tab_group = Ti.UI.createTabGroup();
    var tab = Titanium.UI.createTab({
        title: 'Window',
        window: win
    });

    tab_group.addTab(tab);
    tab_group.open();

})();