主干点击事件:只在实际点击的元素上触发

Backbone click event: Trigger only on element actually clicked on

本文关键字:元素 事件      更新时间:2023-09-26

在Backbone应用程序中,我为集合中的每个模型实例化了一个视图。

如果单击其中一个视图,我想调用一个函数。

不幸的是,该函数被调用了n次,其中n是实例化的模型/视图的数量。我已经设法通过找出被点击的元素来解决这个问题,但我仍然感到不舒服,因为一个事件可能在同一时刻被触发200多次。

事件绑定如下:

var Item = Backbone.View.extend({
    events: {
        'click .list-group-item': function(event) { this.doSomething(event); },
    },
    doSomething: function(event) {
        $(event.currentTarget).toggleClass('active');
    },
});

在上面的代码中,您还可以看到我使用event.currentTarget的解决方案,但我如何避免这种情况?是否有一种方法来区分.list-group-item元素而不诉诸于event.currentTarget,所以优选的是在一个元素被点击的那一刻?

另一种方法是将事件绑定到父元素,因此它只触发一次,然后使用event.currentTarget,但这对我来说似乎也有点可疑。

由于您想要附加到视图中的任何位置的单击,因此不需要指定.list-group-item。另外,您只需要指定事件回调函数的名称:

var Item = Backbone.View.extend({
  events: {
    'click': 'doSomething'
  },
  doSomething: function(event) {
    $(event.currentTarget).toggleClass('active');
  },
});