Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
July 11, 2012

Sencha Touch 2 Touch Events Re-firing

Application Development

While generally we try to avoid native browser alert() and confirm() we sometimes have no control over their use. I have come across a situation where working in a Native iOS app that a certain call caused a confirm dialog to pop up. This call was triggered from a tap event on a custom button.

Here’s an example of what happens:

This scenario was done on iOS Simulator 5.1 iPad mode with the app on the home screen.
Mobile Safari exhibits the same results.
Console logging/remote debugging is provided by weinre

The code behind this:

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

Further reading:

  • Mozilla MDN setTimeOut
  • How JavaScript Timers Work – John Resig
Posted in Application Development
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • Touch DJ A Sencha Touch DJ App
    Touch DJ - A Sencha Touch DJ App

    During the DJing with Sencha Touch talk at SenchaCon 2013 we finally unveiled and demonstrated…

  • Touch DJ A Sencha Touch DJ App
    Touch DJ - A Sencha Touch DJ App

    During the DJing with Sencha Touch talk at SenchaCon 2013 we finally unveiled and demonstrated…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top