jQuery : blur() 이벤트 전 fire click() 이벤트

jQuery : blur() 이벤트 전 fire click() 이벤트

입력란이 있는데 여기서 자동 완성 제안을 하려고 합니다.코드는 다음과 같습니다.

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

입력 시blur()event I want to hide results' div:

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

내가 내 입력에 무엇인가를 쓸 때 서버에 요청을 보내고 json 응답을 받으면 ul->li 구조로 파싱하고 이 ul을 내 ul에 넣습니다.#myresults디브

이 구문 분석된 li 요소를 클릭하면 li에서 입력으로 값을 설정하고 숨깁니다.#myresults디브

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

모든 게 잘 돼가고 있지만, 내 리를 클릭하면blur()앞에 일어난 사건 화재click()입력 값이 리의 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://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;
*/
});

언급URL : https://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event