jQuery: fire click() before blur() event

我有一个输入框，在这里我尽量让自动完成建议。 代码如下所示

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

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

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

当我写的东西进入我输入我请求发送到服务器，并得到JSON响应，它解析为UL->里的结构，并把这个UL我#myresults股利。

当我点击这个解析li元素我想设置从里到输入值和隐藏#myresults DIV

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

一切都很好，但是当我点击我的李blur()之前的事件触发click()和输入的价值没有得到李的HTML。

我如何设置click()事件之前blur()

Answer 1:

解决方法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();
});

Answer 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();
}

小提琴

Answer 3:

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

在鼠标按下的解决方案的替代方案是有它忽略由于通过点击特定元素（即，在您的模糊处理，跳过执行，如果是点击一个特定元素的结果）模糊事件。

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

Answer 4:

我面对这个问题，并用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');
        });

Answer 5:

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;
*/
});

文章来源: jQuery: fire click() before blur() event