jQuery：在blur（）事件之前点击fire（）
美好的一天！
我有一个input字段，我尝试提出自动填充build议。 代码看起来像
<input type="text" id="myinput"> <div id="myresults"></div> 在input的blur()事件我想隐藏结果的div：
$("#myinput").live('blur',function(){ $("#myresults").hide(); });
当我写入input时，我发送请求到服务器并得到JSON响应，parsing成ul-> li结构，并把这个UL到我的#myresults 。
当我点击这个parsing的li元素时，我想从li设置值来input和隐藏#myresults div
$("#myresults ul li").live('click',function(){ $("#myinput").val($(this).html()); $("#myresults").hide(); });
一切都很顺利，但是当我单击我的li blur()事件之前触发click()和input的值不会得到li的html。
如何在blur()之前设置click()事件？
解决scheme1
聆听mousedown而不是click 。
当您按下鼠标button时， mousedown和blur事件会一个接一个地发生，但只有在您释放它时才会发生click 。
解决scheme2
你可以在mousedown preventDefault()来阻止下载窃取焦点。 稍微的优点是，当鼠标button被释放时，该值将被select，这是本地select组件工作的方式。 的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(); }
小提琴
Mousedown解决scheme不适用于我，当我点击非button元素。 所以这里是我在我的代码中使用模糊function所做的：
.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不是我的select。
我通过在处理函数中使用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
mousedown解决scheme的替代scheme是忽略由于单击特定元素（即，在您的模糊处理程序中，如果是单击特定元素的结果，则跳过执行）导致的模糊事件。
$("#myinput").live('blur',function(e){ if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) { $("#myresults").hide(); } });
