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:
