щелчок по элементам внутри прокрутки famo.us

У меня есть прокрутка с несколькими изображениями.

события работают так, что прокрутку можно перетаскивать.

я хочу иметь возможность щелкнуть одно изображение, чтобы получить подробное представление, поэтому использовал:

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

однако это приводит к тому, что если я щелкну изображение при прокрутке, вышеуказанное событие также сработает.

я думаю, это единственная причина, по которой мобильные браузеры имеют задержку в 300 мс, чтобы определить, щелкаете ли вы или перетаскиваете. Есть ли у Famous другие события, которые стоит послушать?

В inputs/FastClick.js я вижу только «touchstart», «touchmove» и «touchend».

мы должны отслеживать, произошло ли движение перетаскивания, в нашем собственном коде, или знаменитый движок помогает с этим?

FWIW я использую GenericSync для передачи событий и для того, чтобы представление также работало на рабочем столе.

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

javascript coffeescript mouseup famo.us
person dcsan    schedule 27.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я столкнулся с подобной проблемой. Чтобы обойти это, я просто отслеживаю, когда прокручивается прокрутка, а затем гарантирую, что прокрутка не будет прокручиваться при нажатии.

Вот код, который я бы добавил. Надеюсь, это поможет!

# In constructor

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

# In addContent

surface.on 'click', () =>
    if !@scrolling
        @parentView.navTo('comicPages')
person johntraver    schedule 27.06.2014
comment
это ловкий трюк, спасибо! а также за любезное написание coffeescript :) FWIW это происходит только на рабочем столе, так что, возможно, это связано с тем, как я передаю события. или famo.us, как правило, неоднородная поддержка рабочего стола. - person dcsan; 28.06.2014
comment
Да, концепция клика отличается на мобильных устройствах, но я успешно использовал этот трюк для работы с touchend на мобильных устройствах. Рад, что это сработало! - person johntraver; 28.06.2014