flick scrolling also generating clicks?

edited February 2012 in Enyo 1.0
On both Android and iOS, flick scrolling is sending click events to the underlying components. Not seeing this in webOS ever, and very rarely in Chrome.

Any suggestions for getting around that? I imagine it could be as simple as if(scroller.isScrolling()) don't react; but I don't see an immediate way to access the scroller from here.. i'm inside a virtual repeater inside a kind that is contained by a scroller inside another kind.


  • Seeing that here on Android.
  • Doesn't seem to be the case for very simple constructs, but for the much more complex constructs in GVoice, it seems to be a problem.
  • edited February 2012
    Can you specify more clearly how your kinds are nested? Something along the lines of:
    {kind: "VirtualRepeater", components: [
             {kind: "MyCustomKind", components: [
                {kind: "etc"}
  • edited February 2012
                                            { name: "overviewScroller", kind: "TransformScroller", flex: 1, autoHorizontal: false, horizontal: false, autoVertical: true, accelerated: true, components:
                                                    { name: "overviewList", kind: "VirtualRepeater", onSetupRow: "overviewListRender", accelerated: true, components:
                                                            { name: "overviewTitle", kind: "Divider", className: "gvoice-divider", allowHtml: true, components:
                                                                    { name: "overviewStar", kind: "starImage", onclick: "doStar", },
                                                            { kind: "messageListRepeater", onMessageClick: "listItemClick", onLinkClick: "linkClicked" },
                                                            { kind: "Item", content: " " },
    where messageListRepeater looks a bit like:
            { kind: "VirtualRepeater", onSetupRow: "renderItem", accelerated: true, onclick: "repeaterClick", components:
                    { kind: "Item", layoutKind: "VFlexLayout", className: "noborders", onclick: "listClick", components:
                            { name: "message", kind: "HFlexBox", components:
                                    { name: "listItem", kind: "HtmlContent", flex: 1, allowHtml: true, onLinkClick: "linkClicked", },
                                    { name: "timestamp", kind: "HtmlContent", allowHtml: false, className: "enyo-item-ternary", },
  • wow that didn't come out looking very nice. :(

    It's even worse in the Blackberry Ripple emulator -- looks like every list, even simple ones, gets a click event when you release the touch.
  • (edited posts... see my PSA in "General" area about how to mark up code in comments)
  • edited February 2012
    Well if you want to check isScrolling(), the way to do it is:


    P.S. I did use the C button. Don't know why it ended up coming out like that. Maybe the forum software needs to automatically wrap code in pre tags.
  • edited February 2012
    yeah mine came out all underlined and stuff, it was weird. it's better now. maybe the pre tag is what i missed.

    rsanchez, genius. I didn't think I could do that because the event was going into the other kind.. however, I just realized while looking at the post, that I'm passing it back down the tree!

    Hmm. Might need some more help. this.$.overviewScroller.$.scroller.isScrolling() is true as soon as i tap.

  • If the editor thinks it's all one one line, it will just use code. Maybe it's a line ending problem.
  • edited February 2012
    I think the problem was definitely the forum software not wrapping the code tag in pre tags like in your post. EDIT: And now the code has a darker background for text, although it adds the pre tag correctly now. Hmm...

    I think I've figured out your problem. Add this code in the .ready() or .componentsReady() of the kind that contains those components:
    this.scroller = this.$.overiewScroller.$.scroller;
    this.scroller.startDragOriginal = this.scroller.startDrag;
    this.scroller.dragFinishOriginal = this.scroller.dragFinish;
    this.scroller.dragStart = enyo.bind(this, function(a) {
        this.isDragging = true;
        return this.scroller.startDragOriginal(a);
    this.scroller.dragFinish = enyo.bind(this, function() {
        this.isDragging = false;
        return this.scroller.dragFinishOriginal();
    If this doesn't work, try doing dragDrop instead of dragFinish.

    Note: framework/source/base/scroller/ScrollStrategy.js
  • edited February 2012
    i think i figured out why that didn't work earlier .. it should just be this.$.overviewScroller.isScrolling()

    that does work in the click event .. at least in Ripple. going to test it all around

    Works in Ripple. Doesn't help in Android, as the scrolling system has already ground to a halt when it receives the click. :(
  • ok, this is so bad it makes me want to laugh .. or cry.
    setAndroidScrollHack: function(inSender, inEvent)
            enyo.application.AndroidScrollHack = true;
            setTimeout(enyo.bind(this, function() { enyo.application.AndroidScrollHack = false; }), 100);
    with "onScrollEnd" set in the scrollers that are problematic set to "setAndroidScrollHack". Then in the onclick for the items that are being clicked on problematically:

    if(this.$.overviewScroller.isScrolling() || enyo.application.AndroidScrollHack) return false;
  • Enyo has often required hacks to work around the limitations set for it in 1.0.
  • I had to implement this same thing into the Playbook copy as well, as on simulator, it's doing the same thing, although it's not halting scrolling like Android does, but the click events don't come until after the scroller has stopped, sometimes.
Sign In or Register to comment.