1. 程式人生 > >Sencha Touch 解決 button tap事件 按下和彈起 兩次響應

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


相關推薦

Sencha Touch 解決 button tap事件 彈起 響應

var fPanel = Ext.create('Ext.Panel',{ id:'panel', items:[{ xtype:'panel',

Button按鈕的擡起點選事件

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; imp

解決input輸入框回車鍵刷新頁面

用戶 type spa ons bmi lse 解決方法 onkeyup inpu input輸入框鍵盤事件按下回車鍵的時候,竟然刷新了整個頁面,用戶體驗相當不好,原來是form表單提交的時候會刷新頁面解決方法如下: 方法一:  <form onsubmit="re

sencha touch 擴充套件篇之將sencha touch打包成安裝程式()- 使用phonegap打包安裝程式

      這講我們來講解下如何使用phonegapa建立專案環境並通過她們將sencha touch打包成app,這裡我們只講解打包android的apk,打包ios的過程有點類似,但是需要在mac環境下,最後通過xcode匯出成ipa安裝程式;   一、phonega

[MFC]MFC的BUTTON控制元件響應滑鼠擡起

有效方法: BOOL CButtontestDlg::PreTranslateMessage(MSG* pMsg) { // TODO: Add your specialized code here and/or call the base class if (pMsg-&g

android 在 button、textview等控制元件選中的時候改變顏色或圖片實現方法

首先,在res資料夾下新建一個資料夾drawable,這是無關解析度的: 在下面建立一個xml檔案:select.xml 方法1 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android

用一張圖片實現按鈕普通效果的樣式

第一種方法(強烈推薦) 方法:selector做遮罩,原圖做background。 我們做按鈕的時候經常需要用兩個圖片來實現按鈕點選和普通狀態的樣式,這就需要提供兩種圖片,而且每個解析度下還有多套圖片,大大增加了apk的大小。 我們希望讓這兩張圖片合二為一,而且還能實現兩種或者多種狀態,怎麼做呢?我

Android selector 最佳寫法 用一張圖片實現按鈕普通效果的樣式

第一種方法(強烈推薦) 方法:selector做遮罩,原圖做background。 我們做按鈕的時候經常需要用兩個圖片來實現按鈕點選和普通狀態的樣式,這就需要提供兩種圖片,而且每個解析度下還有多

VC++中獨立捕獲按鈕擡起個動作

BOOL CRealButtonDlg::OnWndMsg(UINT message, WPARAM wParam, LPARAM lParam, LRESULT* pResult) { switch(message) { case 9999: if(wParam == 1) // 按鈕被滑鼠

解決設定相同高度情況不同高

今天在做一個檢索的功能時,做一個搜尋框 都知道這個功能一個input一個button搞定 但是在設定樣式的時候發現 哎,我明明設定了同樣的高啊,為什麼會不同高呢? 於是開始懷疑人生 陷入了

解決layui富文字編輯器需要提交才生效的問題

<textarea lay-verify="article_desc" name="content" id="demo" style="display: none;"> var fwb = layedit.build('demo'); form.verify({ articl

spark 大型專案實戰(五十八):資料傾斜解決方案之sample取樣傾斜key進行join

當採用隨機數和擴容表進行join解決資料傾斜的時候,就代表著,你的之前的資料傾斜的解決方案,都沒法使用。 這個方案是沒辦法徹底解決資料傾斜的,更多的,是一種對資料傾斜的緩解。 原理,其實在上一講,已經帶出來了。 步驟: 1、選擇一個RDD,要用flatM

Spring+Spring MVC+Mybatis整合配置AOP不生效的解決方案以及Bean初始化重複載入(疑難雜症)

之前上班做spring+spring mvc +hibernate開發, 2年之久不做想複習一下aop的使用,結果配置遇見aop不生效,解決而記錄! 先上程式碼直接看反例效果會明顯: 首先看一下我的程式碼的包路徑: 接下來看Spring-MVC的配置檔案部分程式碼:

Android 監聽按鍵資訊的時候會出現響應解決辦法

最近的專案裡面要監聽軟鍵盤的Enter的按鍵資訊,如下圖,需要在上一行按Enter的時候自動切換到下一行,以此類推。 但是有時候會出現點選一次,響應兩次的現象,也就是按一次Enter換兩行,經過半天

在Angular輸入框內回車會觸發其它button的點選事件解決方法

將不需要觸發事件的button上新增type="button"即可<button type="button" (click)="clickMe()">click</button>參考:https://stackoverflow.com/question

Xamarin.Forms 監聽Button、釋放事件

pre generic ews sed nth lose con isp 技術 Xamarin.Forms 監聽Button的按下、釋放事件 工作中遇到這樣的一個需求,模仿微信發生語音功能,需要實現按鈕按下開始錄音,按鈕釋放錄音結束, Xamarin.Forms中Butto

實體back button事件

接著上一篇 Android Intents with Chrome,我要寫一個功能,讓其他的程式或從 webview 開啟我的程式。 我的browsable 的 activity 被開啟後,按下畫面上的回上一頁,發生的事件和按實體的back button 不一致,原來是需要另外去 handle 一次。 Yo

Unity3D---UGUI---Button相關、點選、、擡起、長事件

一、先介紹一下Inspector面板裡的東西 Button裡一共有兩個指令碼。 image.png Image(Script) 這個跟Image裡是一樣的 Button(Script) Interactable(互動):Button是否可以點

android Button及擡起監聽事件

首先我們在 佈局中,寫入Button按鈕 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android

解決Android Studio 將String類型保存為.txt文件,button跳轉到文件管理器(解決了保存txt文件到文件管理後,手機打開是亂碼的問題)

判斷 text 文件管理器 length button director ioe support get 不知道為什麽保存文件後之前打開一直都OK,就突然打開看到變成亂碼了,最後解決了 關鍵:outStream.write(finalContent.getBytes("g