buttons often don't fire a 'tap' event when pressed

[kworam]

I have created a simple word-guessing game using Sencha Touch 2.0. I have had multiple people try it out on iPhones and the Kindle fire. The interface has a button for each letter of the alphabet and a toolbar with multiple buttons. On both iPhones and the Fire, the buttons often don't fire the 'tap' event when pressed. On many occasions, I actually see the button show a 'depress' animation when the user presses the button, but the 'tap' event handler is not called. It often seems like the user has to press the button for a second or two, and only then is the 'tap' event handler fired.

In all my development testing (on a Chrome browser), the buttons have always responded very reliably to clicks. I am considering changing the interface to do away with the letter buttons and use the device keyboard instead. I can't do away with the toolbar buttons. Why are the Sencha buttons so much harder to use than native buttons?

[Jacky Nguyen]

The size of your buttons might be too small for the finger to target precisely, so making buttons a little larger always help.

Also, add this block of config inside your Ext.application() (or Ext.setup()) statement and adjust the value of 'moveThrottle' as you wish. For example:

Ext.application({
    eventPublishers: {
        touchGesture: {
            moveThrottle: 3
        }
    },

    // ...
});

Note that the bigger the value, the less responsive it is for 'touchmove' events. The default value is 1. Anything less than 5 is recommended.

[kworam]

Thanks for your response. I made the buttons as big as I could and also added the following code to my Ext.appllication and it helped. Users still sometimes get a missed tap, but it is significantly less frequent than it was:

    eventPublishers: {
        touchGesture: {
            moveThrottle: 5  // make the application less responsive for 'touchmove' events (less than 5 is recommended)
        }
    },

[nigelpegg]

Hi Jacky - thanks for this answer : we're building apps for kids, and they have varying (read:not great) levels of fine motor control. One thing we'd like to be able to do is adjust this moveThrottle at runtime (based on a user preference configuration, for example).

This seems to work, but is a bit kludgey - is there any cleaner way I'm missing?

var publishers = Ext.event.Dispatcher.getInstance().getPublishers();
for (var i in publishers) {
if (i=="touchGesture") {
publishers[i].setMoveThrottle(p_tolerance);
}
}

thanks again
nigel