javascript - 单击元素后如何触发 'focusout'？

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();
    }
});