140

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

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

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

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

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

当我单击此解析的 li 元素时，我想将 li 的值设置为输入并隐藏#myresultsdiv

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

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

之前如何设置click()活动blur()？

4

5 回答 5

329

解决方案 1

听mousedown而不是click。

mousedown和blur事件在你按下鼠标按钮时一个接一个地发生，但只有click在你松开它时才会发生。

解决方案 2

您可以阻止下拉菜单窃取焦点preventDefault()。mousedown轻微的好处是当鼠标按钮被释放时该值将被选中，这就是原生选择组件的工作方式。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();
});
于 2012-05-18T13:02:25.773 回答
2 
$(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();
}

小提琴

于 2012-05-18T13:19:24.457 回答
2

我遇到了这个问题，使用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');
        });
于 2016-04-13T10:06:26.810 回答
2

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

mousedown 解决方案的替代方法是让它忽略由单击特定元素引起的模糊事件（即，在你的模糊处理程序中，如果它是单击特定元素的结果，则跳过执行）。

$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});
于 2017-10-10T21:51:46.753 回答
0

当我单击非按钮元素时，Mousedown 解决方案对我不起作用。所以这是我在代码中使用模糊功能所做的：

.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;
*/
});
于 2015-02-12T16:29:53.433 回答