Sencha Touch 解决 button tap事件 按下和弹起 两次响应

        var fPanel = Ext.create('Ext.Panel',{
            id:'panel',
            items:[{
                xtype:'panel',
                layout: {
                        type: 'vbox',
                        pack:'center',
                        align: 'center'
                    },
                items:[{
                    text:'提交',
                    xtype: 'button',
                    listeners: {
                        scope  : this,
                        release : function(button, e, eOpts) {
                            alert();
                        },
                        tap: function(button, e, eOpts) {
                            alert(e);
                        }
                    }
                }]
            }]
        });
        
        Ext.Viewport.add(fPanel); 

在使用 sencha touch 4的时候，创建一个按钮，并添加响应一个tap事件的时候，造成两次响应。
代码大概就像上面那样子。

无论是tap事件响应，还是release事件响应，在按钮点击pressed的时候会响应一次，貌似按钮获得焦点后，处于按下状态。

当再点击任意位置时，按钮释放，又再次响应了一次相同的事件。

貌似在ios的safari下会产生这种想象，chrome下没有。

整个过程相当于click等于两次tap事件，tapstart和tapend吧。

这里解决的方式如下：

tap: function(button, e, eOpts) {
    setTimeout(function() {
        alert();
    }, 0);
}

在触摸周期完成之后再执行其他代码，这样子，两次的想象就消除了。

貌似datalistview的itemtap也有这个问题。

同样的方式：

Ext.define("Storefront.view.Test", {
    extend : 'Ext.Container',
    xtype  : 'test',
    config : {
        centered : true,
        tpl      : '<div class="sf-button sf-button-main">Hello World</div>',
        data     : {}
    },
    initialize   : function() {
        this.callParent();
        this.element.on({
            tap        : this.onTap,
            touchstart : this.onTouchStart,
            touchend   : this.onTouchEnd,
            delegate   : '.sf-button'
        });
    },
    onTap        : function(evtObj) {
        alert('button tapped');
    },
    onTouchStart : function(evtObj) {
        console.log('touchstart fired ' + evtObj.getTime());
        var btn = evtObj.getTarget('.sf-button');
        if(btn) {
            Ext.fly(btn).addCls("sf-button-pressed-main");
        }
    },
    onTouchEnd   : function(evtObj) {
        console.log('touchend fired ' + evtObj.getTime());
        var btn = evtObj.getTarget('.sf-button');
        if(btn) {
            Ext.fly(btn).removeCls("sf-button-pressed-main");
        }
    }
});

To alleviate this issue, all we have to do is wrap the alert in a setTimeout. The setTimeout forces the function to execute after the touch event cycle has fully completed.

onTap: function(evtObj) {
    setTimeout(function() {
        alert('button tapped');
    }, 0);
}