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