jQuery는 팝업 레이어 외부의 아무 곳이나 클릭하여 팝업 레이어를 닫는 효과를 실현합니다.

예전에는 프로젝트를 진행할 때 메인 페이지에서 버튼을 누르면 오른쪽에 해당 콘텐츠에 대한 상세 정보가 출력되는 div가 나타나는 경우가 많았습니다. 이때 팝업 레이어 외부를 마우스로 클릭하면 팝업 레이어가 닫히도록 하고자 합니다.

마우스로 클릭한 요소 찾기

이 요소가 지정된 영역에 있는지 확인합니다. 실제로는 해당 상위 요소가 팝업 레이어인지 확인하는 것입니다.

그렇지 않으면 팝업 레이어를 숨기고, 아무 작업도 수행되지 않습니다

특정 구현

이 코드에는 jQuery가 필요하며 코드는 다음과 같습니다.

$(document).mousedown(function(e){
if($(e.target).parent("#info").length==0){
$("#info").hide();
}
})
$(document).mousedown(function(e){})

$(document)는 네이티브와 유사하게 전체 웹 페이지 문서 개체를 가져오는 것입니다. window.ducument

mousedown은 마우스 이벤트로, 마우스 포인터가 요소 위로 이동할 때를 나타내며 유사한 이벤트는 다음과 같습니다.

mouseup: 요소에서 휴식을 취할 때 마우스 버튼

mouseover: 마우스 포인터가 요소 위에 있을 때

$(e. target)

$(e.target)은 클릭 이벤트를 받는 요소를 나타냅니다.

parent()

$(e.target).parent("#info").length는 info라는 ID를 가진 현재 클릭 이벤트 요소의 상위 요소를 가져오는 것입니다.