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); }