当存在“focusout”事件时，BackboneJS“click”事件未触发

Question

我有一个视图，我在其中触发下拉菜单，当文本输入在 BackboneJS 中成为焦点时提供许多选项（类似于 Select2 的想法）：

events: {
   'click .option': 'clickItem',
   'focusin .big-select-input': 'focusIn',
   'focusout big-select-input': 'focusOut'
},

focusIn: function() {
   this.$el.find('.big-select-options').show();
},

focusOut: function() {
   this.$el.find('.big-select-options').hide();
},

clickItem: function() {
   console.log('item clicked');
}


<input type="text" class="big-select-input" />
<div class="big-select-options" style="display:none;">
<div class="option">Item</option>
<div class="option">Item</option>
<div class="option">Item</option>
<div class="option">Item</option>
</div>

我注意到的是，当“focusout”事件存在时，该选项的点击事件不会触发。如果我删除了 focusout 事件（或 blur 事件），则单击有效。

如何让 click 和 focusout 同时工作？

这是一个简单的例子http://jsbin.com/bivilujili/1/edit?html,js,console,output

Answer 1

如果我理解正确，您认为您正在单击一个选项，但实际上并非如此。当您尝试单击一个选项时，输入必须失去焦点。当输入失去焦点时，您将隐藏选项的容器。所以你不能再点击它了。他们只是躲起来。

您需要更新您的逻辑以不隐藏它们。