[javascript] onclick () 및 onblur () 주문 문제

사용자 지정 드롭 다운 메뉴를 표시하는 입력 필드가 있습니다. 다음 기능을 원합니다.

• 사용자가 입력 필드 외부의 아무 곳이나 클릭하면 메뉴가 제거되어야합니다.
• 보다 구체적으로 사용자가 메뉴 내의 div를 클릭하면 메뉴를 제거 하고 어떤 div를 클릭했는지에 따라 특별한 처리가 수행되어야합니다.

내 구현은 다음과 같습니다.

입력 필드에는 사용자가 입력 필드 외부를 클릭 할 때마다 onblur()메뉴를 삭제 하는 이벤트가 있습니다 (상위 항목 innerHTML을 빈 문자열로 설정). 메뉴 내부의 div onclick()에는 특수 처리를 실행하는 이벤트 도 있습니다 .

문제는 onclick()메뉴를 클릭 할 때 이벤트가 실행되지 않는다는 것입니다. 입력 필드 onblur()가 먼저 실행되고 onclick()s!

메뉴 div ‘ onclick()를 onmousedown()및 onmouseup()이벤트 로 나누고이 답변 에서 제안 된 것과 유사하게 마우스를 위로하면 마우스를 내리는 전역 플래그를 설정 하여 문제를 해결했습니다 . onmousedown()이전 onblur()에 실행되기 때문에 onblur()메뉴 div 중 하나를 클릭하면 플래그가 설정 되지만 화면의 다른 곳이 클릭 된 경우에는 설정되지 않습니다. 메뉴를 클릭하면 메뉴 onblur()를 삭제하지 않고 즉시 돌아온 다음가 onclick()실행될 때까지 기다리면 메뉴 를 안전하게 삭제할 수 있습니다.

더 우아한 해결책이 있습니까?

코드는 다음과 같습니다.

<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />

var mouseflag;

function setFlag() {
    mouseflag = true;
}

function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}

function doProcessing(id, name) {
    mouseflag = false;
    ...
}

답변

<input id="input" onblur="removeMenu()" ... />

function removeMenu() {
    setInterval(function(){
        if (!mouseflag) {
            document.getElementById('menu').innerHTML = '';
        }
    }, 0);
}