[英]How to hide a div in Backbone when user clicks outside of div?
我在Backbone中有一个包含内部div的视图。 我想在用户点击div之外时隐藏div。
我不确定如何在View中设置一个“点击NOT #inner_div”的事件：“removeDiv”。
有关如何做到这一点的任何建议？
通常的方法是将单击处理程序直接附加到<body> ，然后关闭或隐藏<div> 。 例如：
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;
}
如果您只想隐藏<div>而不是删除它，只需将<body>上的点击绑定到与remove不同的方法; 您仍然希望从删除中的<body>中remove点击处理程序。 此外，您还希望在视图的el上捕获点击事件，以防止它们进入<body> 。
演示： http ： //jsfiddle.net/ambiguous/R698h/
如果你有其他关心点击事件的元素，那么你绝对可以放置一个<div>来掩盖<body> ，然后将你的点击处理程序绑定到那个。 您可以查看jQuery BlockUI插件，了解如何完成此操作。
如果使用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可以让你通过给你的视图一些适当的结构让Backbone为你处理事情。 例如：
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事件的绑定，以防止在用户点击它时将其处理掉。
演示： https ： //jsfiddle.net/embs/45da2ppm/
如果您已经拥有一个复杂的Backbone视图结构，无法轻松地重构为子视图结构，您仍然可以使用Backbone.Events模块在内部视图中侦听外部视图的单击事件，然后根据需要对其进行操作。
当用户单击DIV而不是垂直于一个div时，jQuery隐藏DIV
[英]jQuery to hide a DIV when the user clicks outside of it, but not on perticular one div
当用户单击DIV而不是滚动条时，jQuery隐藏DIV
[英]jQuery to hide a DIV when the user clicks outside of it, but not on scrollbar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.