jQuery: fire click() before blur() event

解决 click 事件和 blur 事件被触发先后顺序问题。输入框自动补全功能的实现 (Select Components, Dropdown, Autocomplete)

Question

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

这里有一个 input,我想让这个 input 拥有 自动补全 (autocomplete) 功能。

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

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

inputblur() 事件触发时,我想执行隐藏 自动补全候选结果 的 div:

1
2
3
$("#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.

当我输入了一些东西到 input 里,JS 会请求服务器并获取 json 响应数据,并将其解析成 ul->li 的结构,放入 #myresults div 中。

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

当我点击 li 元素时,我想根据 li 来设置 input 的值,并且隐藏 #myresults div

1
2
3
4
$("#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.

但是当我点击 li 元素时,blur() 事件比 click() 事件先被触发,所以没办法获取 li 的值并填入 input

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

怎么才能让 click() 事件比 blur() 先被触发?

Answer

Solution 1

Listen to mousedown instead of click.

监听 mousedown 事件,而不是 click

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

当您按下鼠标时,mousedownblur 事件会一个接一个地被触发,但 click 事件只有在释放鼠标时它才会被触发。

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.

你可以在 mousedown 中使用 preventDefault() 来阻止 dropdown 获取焦点。 这样做微小的优势是,当鼠标按键释放时,值就能被选中,原生的 Select Components 就是这样工作的。

1
2
3
4
5
$('input').on('focus', function() {
$('ul').show();
}).on('blur', function() {
$('ul').hide();
});
1
2
3
4
5
$('ul').on('mousedown', function(event) {
event.preventDefault();
}).on('click', 'li', function() {
$('input').val(this.textContent).blur();
});

StackOverflow

本站文章除注明转载外均为原创,未经允许不要转载哇. ヾ(゚ー゚ヾ) http://qwqaq.com/208e3be9.html
分享到