clicking items inside a famo.us scrollview

Question

I have a scrollview with a number of images.

events are working such that the scrollview can be dragged around.

i want to be able to click on a single image to get a detail view so used a:

surface.on 'click', => @parent.navTo('detail')

however, this has the effect that if i click an image when scrolling the above event will also fire.

i guess this is the whole reason mobile browsers have that 300ms delay - to tell if you're clicking or dragging. does Famous have other events to listen for?

In inputs/FastClick.js i only see 'touchstart' 'touchmove' and 'touchend'

do we have to track if a drag motion happened, in our own code, or does the famous engine assist with this?

FWIW i'm using a GenericSync to pipe the events around, and to make the view also work on the desktop.

constructor: (@parentView, @data) ->
  SCROLLDIR = 1   # 0 horiz, 1 vertical
  super({
    direction: SCROLLDIR
    paginated: true
    pageStopSpeed: 5
  })

  @addContent()
  @mouseSync   = new famous.inputs.MouseSync({direction: SCROLLDIR})
  @mouseSync.pipe(this)

addContent: () ->

  comics = Comics.find()
  surfaces = []
  @sequenceFrom(surfaces)

  for item in comics.fetch()
    div = document.createElement('div')
    comp = UI.renderWithData(Template.comicCover, item)
    UI.insert(comp, div)

    surface = new famous.core.Surface({
      content: div
      size: [undefined, 400]
      properties:
        backgroundColor: "#eff"
    })
    surfaces.push(surface)
    surface.pipe(this)
    surface.on 'click', => @parentView.navTo('comicPages')

    # surface.pipe(@mouseSync)

  return @surface

Answer 1

I have encountered a similar issue. To get around it, I simply track when the scrollview is scrolling and then ensure not scrolling on click.

Here is the code that I would add.. Hope it helps!

# In constructor

this.sync.on 'update',  () => @scrolling = true
this.sync.on 'end',     () => @scrolling = false

# In addContent

surface.on 'click', () =>
    if !@scrolling
        @parentView.navTo('comicPages')