Javascript 当用户在div外部单击时，如何在主干中隐藏div？

我在主干中有一个包含内部div的视图。我想在用户单击div外部时隐藏该div

我不知道如何在显示“click not#internal_div”：“removeDiv”的视图中设置事件

---

有什么建议吗？

通常的方法是将单击处理程序直接附加到

上，然后关闭或隐藏您的

。例如：

render: function() {
    $('body').on('click', this.remove);
    this.$el.html('<div id="d"></div>');
    return this;
},
remove: function() {
    $('body').off('click', this.remove);
    // This is what the default `remove` does.
    this.$el.remove();
    return this;
}

render:function（）{
$（'body'）。在（'click'，this.remove'）；
此.$el.html（“”）；
归还这个；
},
删除：函数（）{
$（'body'）.off（'click'，this.remove）；
//这就是默认的'remove'所做的。
这个。$el.remove（）；
归还这个；
}

如果您只想隐藏

，而不是删除它，只需将单击

的按钮绑定到不同的方法即可；不过，您仍然需要从

删除
中的
中删除单击处理程序。此外，您还需要捕获视图的
el
上的单击事件，以防止它们进入

演示：

如果您有其他关注单击事件的元素，那么您完全可以定位一个
来覆盖
，然后将您的单击处理程序绑定到该元素。您可以查看插件以了解这是如何实现的。
如果您使用Prototype，您可以执行以下操作：

initialize: function() {
  // some code
  document.on('click', function(e, target) {
    if (target !== this.el && target.up('#inner_div').length === 0) {
      this.remove();
    }
  }.bind(this));
}

我想使用jQuery时，它可能是这样的：

initialize: function() {
  // some code
  $(document).on('click', function(e) {
    if (e.target !== this.el && e.target.parent('#inner_div').length === 0) {
      this.remove();
    }
  }.bind(this));
}

尽管直接操作DOM是可行的，但通过为视图提供一些适当的结构，您可以让主干为您处理事情。例如：

BoxView = Backbone.View.extend({
  events: {
    'click': '_click'
  },

  _click: function() {
    return false;
  }
});

AppView = Backbone.View.extend({
  el: '.app',

  initialize: function() {
    this.boxView = new BoxView({ el: $('.box') })
  },

  events: {
    'click': '_click'
  },

  _click: function() {
    this.boxView.remove();
  }
});

new AppView({ el: $('.app') });

通过这种方式，我们可以在触发单击外部视图后更改内部视图。请注意BoxView
click
事件上的绑定，以防止用户单击它时将其释放

演示：

如果您已经有一个复杂的主干视图结构，无法轻松地重构为子视图结构，您仍然可以利用来侦听内部视图中外部视图的单击事件，然后根据需要对其进行操作

我还建议检查一下这个关于主干网工作时常见错误的nice。其中一些与您的问题密切相关：