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

#javascript #coffeescript #famo.us #mouseup

#javascript #coffeescript #famo.us #наведите курсор мыши

Вопрос:

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

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

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

 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
 

Ответ №1:

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

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

 # In constructor

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

# In addContent

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

Комментарии:

1. это отличный трюк, спасибо! а также за любезное написание coffeescript 🙂 FWIW это происходит только на рабочем столе, так что, возможно, это связано с тем, как я распределяю события. или famo.us как правило, неоднородная поддержка рабочего стола.

2. Да, концепция щелчка отличается на мобильных устройствах, но я успешно использовал этот трюк для работы с touchend на мобильных устройствах. Рад, что это сработало!