Sencha Touch: Button handler called twice for single click - why?

Question

My button handler gets called twice - once for mousedown/touchstart and a second time for mouseup/touchend.

This happens both on my iPhone device and in my Chrome Browser.

Using ST 1.1

I haven't found any references to this problem which seems to suggest that something in my env is wrong, but I'm running out of things to check ...

Examining the event objects passed to the handler in Chrome DevTools I can see that they're both simulated "tap" events, the first originating from "mousedown" and the second from "mouseup".

Any ideas ?

EDIT:

I've found out that this happens when I add a call (even with an empty handler) to Ext.EventManager.onDocumentReady.

If I remove this call, I only get clicks on "mouseup" as expected.

If I replace it with Ext.onReady it works !!! This is really bewildering since one is an alias for the other ...

code reproduction:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="resources/Sencha/sencha-touch-debug.js" type="text/javascript"></script>
    <link href="resources/Sencha/sencha-touch.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        MyPanel = Ext.extend(Ext.Panel, {
            fullscreen: true,

            initComponent: function() {
                this.items = [{
                    xtype: 'button',
                    text: 'Login',
                    handler: this.myHandler,
                    scope: this
                }];

                MyPanel.superclass.initComponent.apply(this, arguments);
            },

            myHandler: function(b, e) {
                console.log(e.event.type);
            }

        });

        Ext.EventManager.onDocumentReady(function() {

        });

        Ext.onReady(function() {
            new MyPanel();
        });
    </script>
    </head>
    <body></body>
</html>

@kalyanipuvvada I don't recall finding the cause, but I think the workaround of using 'Ext.onReady' instead of 'Ext.EventManager.onDocumentReady' was enough for me. — ob1

Jacob Oscarson Jacob Oscarson · Accepted Answer · 2011-12-01T14:40:54

I've had this problem with with undecorated link nodes. I managed to fix it by eating touchend events on A nodes:

document.addEventListener('touchend', function(e) {
  e.preventDefault() if e.target.localName == 'a')
}, true);

This isn't exactly your problem, but chances are that your problem is simliar, caused by both touch and click events being sent to the widget. Here's a method I use to spam my console with as much of all events being sent (that's raw DOM events, not Ext events) as possible. It's useful for troubleshooting low-level problems like this.

Sencha Touch: Button handler called twice for single click - why?

1 Answers