JQuery: fire click() before zzy() event jQuery: 在模糊()事件之前点击()

我有一个输入字段，在这里我尝试自动完成建议

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

在 input 的 blur()事件中，我想隐藏 result 的 div:

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

当我在输入中写入一些内容时，我向 server 发送请求并获得 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()事件？

80242 次浏览
小开
最佳答案

解决方案1

听 mousedown而不是 click。

当您按下鼠标按钮时，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();
});
小开 
$(document).on('blur', "#myinput", hideResult);


$(document).on('mousedown', "#myresults ul li", function(){
$(document).off('blur', "#myinput", hideResult); //unbind the handler before updating value
$("#myinput").val($(this).html()).blur(); //make sure it does not have focus anymore
hideResult();
$(document).on('blur', "#myinput", hideResult);  //rebind the handler if needed
});


function hideResult() {
$("#myresults").hide();
}

小提琴

小开

当我单击非按钮元素时，鼠标向下解决方案对我不起作用。下面是我在代码中对模糊函数所做的处理:

.on("blur",":text,:checkbox,:radio,select",function() {
/*
* el.container
* container, you want detect click function on.
*/
var outerDir = el.container.find(':hover').last();
if (outerDir.length) {
if ($.inArray(outerDir.prop('tagName'), ["A","SELECT"] ) != -1 || outerDir.prop('type') == 'button' || outerDir.prop('type') == 'submit') {
outerDir.click();
}
if (outerDir.prop('type') == 'checkbox') {
outerDir.change();
}
return false;
}
/*
* YOUR_BLUR_FUNCTION_HERE;
*/
});
小开

我面临这个问题，使用 mousedown不是我的选择。

我通过在 Handler 函数中使用 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');
});
小开

我刚刚回答了一个类似的问题: https://stackoverflow.com/a/46676463/227578

鼠标向下解决方案的一个替代方案是忽略由单击特定元素引起的模糊事件(例如，在您的模糊处理程序中，如果是单击特定元素的结果，则跳过执行)。

$("#myinput").live('blur',function(e){
if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
$("#myresults").hide();
}
});

提交答案