jQuery : blur () 이벤트 전에 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();
});

모든 것이 잘 진행되고 있지만 클릭하면 li blur()이벤트가 시작 click()되고 입력 값이 li의 html을 얻지 못합니다.

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