jQuery: fire click () trước sự kiện Blur ()

Tôi có một trường đầu vào, nơi tôi cố gắng thực hiện đề xuất tự động hoàn thành. Mã trông như

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

Trong blur()sự kiện đầu vào, tôi muốn ẩn div kết quả:

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

Khi tôi viết một cái gì đó vào đầu vào của mình, tôi gửi yêu cầu đến máy chủ và nhận được phản hồi json, phân tích nó thành cấu trúc ul-> li và đặt ul này vào #myresultsdiv của tôi .

Khi tôi nhấp vào phần tử li được phân tích cú pháp này, tôi muốn đặt giá trị từ li thành đầu vào và ẩn #myresultsdiv

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

Mọi thứ đang diễn ra tốt đẹp, nhưng khi tôi nhấp vào blur()sự kiện li của mình sẽ kích hoạt trước đó click()và giá trị đầu vào không nhận được html của li.

Làm thế nào tôi có thể thiết lập click()sự kiện trước blur()?

Giải pháp 1

Nghe mousedownthay click.

Sự kiện mousedownvà blursự kiện xảy ra lần lượt khi bạn nhấn nút chuột, nhưng clickchỉ xảy ra khi bạn nhả nó.

Giải pháp 2

Bạn có thể preventDefault()vào mousedownđể chặn thả xuống từ ăn cắp tập trung. Ưu điểm nhỏ là giá trị sẽ được chọn khi nút chuột được phát hành, đó là cách các thành phần chọn gốc hoạt động. Câu đố

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

VĨ CẦM

Tôi đã đối mặt với vấn đề này và sử dụng mousedownkhông phải là một lựa chọn cho tôi.

Tôi đã giải quyết điều này bằng cách sử dụng setTimeoutchức năng xử lý

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

Tôi vừa trả lời một câu hỏi tương tự: https://stackoverflow.com/a/46676463/227578

Một giải pháp thay thế cho các giải pháp mousedown là nó bỏ qua các sự kiện mờ gây ra bằng cách nhấp vào các phần tử cụ thể (nghĩa là trong trình xử lý mờ của bạn, bỏ qua việc thực thi nếu đó là kết quả của việc nhấp vào một phần tử cụ thể).

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

Các giải pháp Mousedown không hoạt động đối với tôi, khi tôi nhấp vào các yếu tố không phải nút. Vì vậy, đây là những gì tôi đã thực hiện với chức năng làm mờ trong mã của mình:

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