我有一个视图,在其中我触发了下拉菜单,当一个文本输入在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'事件存在时,选项的click事件不会触发。如果我删除focusout事件(或blur事件),click事件就会生效。
如何让click和focusout同时工作?
下面是一个准系统示例http://jsbin.com/bivilujili/1/edit?html,js,console,output
1条答案
按热度按时间pieyvz9o1#
如果我没理解错的话,你认为你在点击一个选项,但你没有。当你试图点击一个选项时,输入必须失去焦点。当输入失去焦点时,你隐藏了选项的容器。所以你不能再点击它了。它们只是隐藏起来。
您需要更新您的逻辑以不隐藏它们。