javascript - 单击元素后如何触发“聚焦”？

Question

我有以下标记：

<select style="display:none">
    <option value='1'>1</option>
    <option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
    <li id='1'>1</li>
    <li id='2'>2</li>
</ul>

以及以下 JQuery 代码：

$(document).ready(function() {
    $('select').each(function() {
        var parent = this;
        $('#comboBoxData').on('click', 'li', function() {
            var value = $(this).prop('id');
            $(parent).val(value);
            $('#comboBox').val(value);
        });
    });   
    $('#comboBox').bind('focusin', function () {
        $('#comboBoxData').show();
    });   
    $('#comboBox').bind('focusout', function () {
        $('#comboBoxData').hide();
    });
});

当我单击 LI 之一时，“comboBoxData”元素在单击触发器发生之前消失。有没有办法解决这个问题或替代事件，我可以使用它来产生与焦点输出相同的效果？

Answer 1

放置 mouseenter 和 mouseleave 事件并更改全局变量的值，例如 isOver。

$('select').each(function() {
    var parent = this;
    $('#comboBoxData').on('click', 'li', function() {
        var value = $(this).prop('id');
        $(parent).val(value);
        $('#comboBox').val(value);
        $('#comboBoxData').hide();
    });
}); 
$('#comboBoxData').mouseover(function(){
    isOver = true;
}).mouseleave(function(){
    isOver = false;
});
$('#comboBox').bind('focusin', function () {
    $('#comboBoxData').show();
});   
$('#comboBox').bind('focusout', function () {
    if(!isOver){
        $('#comboBoxData').hide();
    }
});

Answer 2

你不需要这个：

 $('#comboBox').bind('focusout', function () {
        $('#comboBoxData').hide();
 });

而是在里面使用这个$('#comboBoxData').on('click', 'li', function() {

如果你对插件没问题，你可以这样使用：

$('#menu').bind('clickoutside', function (event) {
    $(this).hide();
});

你可以在这里得到那个插件

另外，我在不使用插件的情况下更改了代码：请检查更新的答案：

演示

Answer 3

尝试blur()功能

$('#comboBox').blur(function () {
        $('#comboBoxData').hide();
    });

blur 事件在失去焦点时发送到元素。

来自http://api.jquery.com/blur/

Answer 4

不完全优雅，但它有效。

$("body").click(function(event){   
    if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){    
        $("#comboBoxData").hide(); }
}); 


$(document).ready(function() {
    $('select').each(function() {
        $('#comboBoxData').on('click', 'li', function() {
        var value = $(this).prop('id');
                $('#comboBox').val(value);
           $('#comboBoxData').hide();
        });
    });   

    $('#comboBox').bind('focusin', function () {
    $('#comboBoxData').show();
  });
});