开发者

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

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 t开发者_运维技巧his 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>


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜