捕获div上的滚动事件

Question

我正在尝试捕获Backbone.Marionette.CompositeView中的滚动事件,但没有成功.

作为练习,我使用Backbone.Marionette 重写http://www.atinux.fr/backbone-books/.如您所见,当您向下滚动时,会获取并显示更多书籍(即无限滚动).但是,我无法在我的视图中捕获滚动事件.

这是我的(简化)代码:

  LibraryView = Backbone.Marionette.CompositeView.extend({
    // properties, initializer, etc.

    events: {
      'scroll': 'loadMoreBooks',
      'click': 'loadMoreBooks'
    },

    // some functions

    loadMoreBooks: function(){
      console.log("loadMoreBooks");
    }
  });

完整的源代码可以在这里看到:https://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

我不明白的是,"点击"事件正在被正确触发,但"滚动"事件却没有.我究竟做错了什么？

---

编辑:所以错误最后很简单......我将"el:#content"传递给视图的构造函数,但滚动在CSS中定义为".library".一旦我改变了我的DOM

<div id="content">
  <div class="library">
  </div>
</div>

至

<div id="content" class="library"></div>

一切正常......

Answer 1

Backbone附加到顶部el元素以查找所有事件.一些DOM事件不会冒泡到父元素,这包括滚动.点击事件有效,因为它确实有泡沫.

参考:http://www.w3.org/TR/2009/WD-DOM-Level-3-Events-20090908/#event-type-scroll

Answer 2

这段代码适合我:

var View = Backbone.View.extend({
  events: { "scroll": "scroll" },
  scroll: function(){ console.log( "scrolling..." ); }
});

检查jsFiddle

正如@JoshLeitzel所说,我认为问题在于它自己的DOM元素.

尝试绕过Backbone做:

$("#content").bind( "scroll", function(){ console.log( "scrolling from jquery directly" ); } );

也尝试替换:

el: $('#content')

通过

el: '#content'

我不认为这是问题,但是新的el定义风格:)