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：＃内容”到视图的构造器，但滚动在CSS定义的“.library”。所以一旦我改变了我的DOM从

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

到

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

一切工作正常...

Answer 1

此代码的工作对我来说：

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

Check the jsFiddle

正如@JoshLeitzel说，我认为这个问题是在DOM元素，它的自我。

尝试旁路骨干做：

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

而且试图取代：

el: $('#content') 

通过

el: '#content' 

我不认为这是问题，但el定义的新款式:)

Answer 2

我不知道你的el是什么，但我怀疑它的东西，不收到scroll事件。由于骨干代表事件处理jQuery的，看看有什么jQuery的说对scroll event：

的scroll事件被发送到一个元素，当用户滚动到的元素的 不同的地方。它适用于window对象，而且 可滚动框架和元素的overflow CSS属性集 滚动（或auto当元素的显式高度或宽度小于 比其内容的高度或宽度）。

除非你el满足这些条件，也不会收到scroll事件。您将不得不将事件处理程序放在window或其他一些接收它的元素上。

Answer 3

骨干连接顶部el元素查找全部事件。一些DOM事件没有冒泡到父元素，这包括滚动。点击事件起作用，因为它确实起泡。

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