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

    xiaoxiao2025-02-10  20

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

    转载请注明原文地址: https://ju.6miu.com/read-1296307.html
    最新回复(0)