jQuery:在blur()事件之前触发click()
jQuery:在blur()事件之前触发click()
提问于 2012-05-18 20:41:50
我有一个输入栏，在那里我可以尝试自动完成建议。代码看起来像这样
<input type="text" id="myinput">
<div id="myresults"></div>在输入的blur()事件中，我想隐藏结果的div：
$("#myinput").live('blur',function(){
$("#myresults").hide();
});当我在输入中写一些东西时，我向服务器发送请求并获得json响应，将其解析成ul->li结构，并将这个ul放到我的#myresults目录中。
当我单击这个已解析的li元素时，我希望将li中的值设置为input并隐藏#myresults div
$("#myresults ul li").live('click',function(){
$("#myinput").val($(this).html());
$("#myresults").hide();
});一切都很顺利，但是当我单击在click()之前触发的li blur()事件，并且输入的值没有得到li的html时。
如何在blur()之前设置click()事件
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-18 21:02:26
解决方案1
不要听click，而要听mousedown。
当您按下鼠标按钮时，mousedown和blur事件会相继发生，但click只会在您松开鼠标按钮时发生。
解决方案2
你可以在mousedown中使用preventDefault()来阻止下拉菜单窃取焦点。它的一个小优点是，当释放鼠标按钮时，该值将被选中，这就是本机选择组件的工作方式。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();
});Stack Overflow用户
发布于 2016-04-13 18:06:27
我遇到了这个问题，使用mousedown对我来说不是一个选择。
我通过在处理函数中使用setTimeout解决了这个问题
elem1.on('blur',function(e) {
var obj = $(this);
// Delay to allow click to execute
setTimeout(function () {
if (e.type == 'blur') {
// Do stuff here
}
}, 250);
});
elem2.click( function() {
console.log('Clicked');
});Stack Overflow用户
发布于 2017-10-11 05:51:47
我刚刚回答了一个类似的问题：https://stackoverflow.com/a/46676463/227578
mousedown解决方案的另一种选择是让它忽略由单击特定元素引起的模糊事件(即，在模糊处理程序中，如果是单击特定元素的结果，则跳过执行)。
$("#myinput").live('blur',function(e){
if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
$("#myresults").hide();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10652852
复制相关文章
相似问题