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事件不会冒泡到父元素，这包括 scroll 。点击事件有效，因为它确实有泡沫。

参考：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..." ); }
});

Check the jsFiddle

正如@JoshLeitzel所说，我认为问题出在DOM元素中。

尝试绕过Backbone做：

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

也尝试替换：

el: $('#content')

通过

el: '#content'

我不认为这是问题，但是el定义的新风格：）

Answer 3

我不知道你的el是什么，但我怀疑它是没有收到scroll事件的东西。由于Backbone将事件处理委托给jQuery，请查看jQuery对scroll event所说的内容：

当用户滚动到a时，scroll事件被发送到元素元素中的不同位置。它适用于window个对象，但也适用可设置overflow CSS属性的可滚动框架和元素滚动（或auto当元素的显式高度或宽度较小时而不是其内容的高度或宽度。）

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

捕获div上的滚动事件

3 个答案: