javascript - 单击 famo.us ScrollView 内的项目

Question

我有一个包含许多图像的 ScrollView 。

事件正在运行，因此可以拖动 ScrollView 。

我希望能够单击单个图像来获取详细 View ，因此使用:

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

但是，如果我在滚动时单击图像，上述事件也会触发。

我猜这就是移动浏览器有 300 毫秒延迟的全部原因 - 判断您是在单击还是在拖动。 Famous 还有其他事件可供收听吗？

在inputs/FastClick.js中我只看到'touchstart''touchmove'和'touchend'

我们是否必须在我们自己的代码中跟踪是否发生了拖动 Action ，或者著名的引擎是否对此提供了帮助？

FWIW，我正在使用 GenericSync 来传输事件，并使 View 也可以在桌面上工作。

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

我也遇到过类似的问题。为了解决这个问题，我只需跟踪 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')