jQuery:在 blur() 事件之前触发 click()

Question

我有一个输入字段，我尝试在其中提供自动完成建议。代码看起来像

<input type="text" id="myinput">
<div id="myresults"></div>

在输入的 blur() 事件中我想隐藏结果的 div:

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

当我在输入中写入内容时，我向服务器发送请求并获得 json 响应，将其解析为 ul->li 结构并将此 ul 放入我的 #myresults div。

当我点击这个已解析的 li 元素时，我想将 li 的值设置为 input 并隐藏 #myresults div

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

一切都很好，但是当我点击我的 li blur() 事件在 click() 之前触发并且输入的值没有得到 li 的 html。

如何在 blur() 之前设置 click() 事件？

Answer 1

解决方案一

聆听 mousedown 而不是 click。

mousedown 和 blur 事件在您按下鼠标按钮时相继发生，但 click 仅在您释放鼠标按钮时发生。

解决方案2

您可以在 mousedown 中使用 preventDefault() 来阻止下拉菜单窃取焦点。轻微的优势是当鼠标按钮被释放时将选择该值，这是 native 选择组件的工作方式。 JSFiddle

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});