How to add touch and hold event on svg on Google Map in Sencha Touch

Question

I have a Google Map in my Sencha Touch app, and I draw many SVG elements on top of it.

Now I'd like to add touch and hold (means it will be triggered when user touch and hold figure on a SVG element longer than 1.5 second) on each of SVG elements and when the even is triggered, I'd like pop up an information dialog associated with the clicked SVG element.

I have tried: Ext.util.TaPrepeater(doesn't work)

  var startTime
      Ext.create('Ext.util.TapRepeater', {
            el: drawnElements[uniqueTrackID],
            listeners: {
                touchstart: function () {
                    startTime = new Date();
                },
                touchend: function () {
                    var now = new Date();
                    if (now - startTime >= 1500)
                    {
                        Ext.Msg.alert("haha");
                    }
                }
            }
        });

And also tried adding events directly on the SVG (doesn't work either)

  drawnElements[uniqueTrackID].on('touchstart', function () {
        startTime = new Date();
    });

    drawnElements[uniqueTrackID].on('touchend', function () {
        var rightNow = new Date();
        if (rightNow - startTime >= 1500) {
            Ext.Msg.alert("haha");
        }

    });

and found very limited relevant posts.

Answer 1

touchstart and touchend events have arguments. One of them is touch details(arguments[0]). You can use something like this:

touchstart: function (details) {
                    userTime = details.touch.timeStamp;
                }