Sencha Touch: Button handler called twice for single click - why?_问答_开发者

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

开发者 https://www.devze.com 2023-03-15 11:42 出处：网络

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

相关专题：sencha-touch

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.