blur和click事件的先后顺序问题

这两个同时用会有冲突。懒得翻译了，需要的自己看哈。

以下摘自stackoverflow。

I have an input field, where I try to make autocomplete suggestion. Code looks like

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

On input's blur() event I want to hide results' div:

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

When I write something into my input I send request to server and get json response, parse it into ul->li structure and put this ul to my #myresults div.

When I click to this parsed li element I want to set value from li to input and hide #myresults div

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

Everything is going good, but when I click to my li blur() event fires before click() and input's value don't get li's html.

How can I set up click() event before blur()?

Solution 1

Listen to mousedown instead of click.

The mousedown and blur events occur one after another when you press the mouse button, but click only occurs when you release it.

Solution 2

You can preventDefault() in mousedown to block the dropdown from stealing focus. The slight advantage is that the value will be selected when the mouse button is released, which is how native select components work. 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();
});