jQuery: fire click () ก่อนเหตุการณ์เบลอ ()

ฉันมีช่องป้อนข้อมูลซึ่งฉันพยายามให้คำแนะนำในการเติมข้อความอัตโนมัติ รหัสดูเหมือน

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

ทุกอย่างเป็นไปด้วยดี แต่เมื่อฉันคลิกไปที่blur()เหตุการณ์li ของฉันจะเริ่มทำงานก่อนclick()และค่าของอินพุตไม่ได้รับ html ของ li

จะตั้งค่าclick()เหตุการณ์ก่อนได้blur()อย่างไร?

โซลูชันที่ 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();
});

$(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ไม่ใช่ตัวเลือกสำหรับฉัน

ฉันแก้ไขสิ่งนี้โดยใช้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();
     }
});

โซลูชันการวางเมาส์ไม่ได้ผลสำหรับฉันเมื่อฉันคลิกที่องค์ประกอบที่ไม่ใช่ปุ่ม นี่คือสิ่งที่ฉันทำกับฟังก์ชันเบลอในโค้ดของฉัน:

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