예전에는 프로젝트를 진행할 때 메인 페이지에서 버튼을 누르면 오른쪽에 해당 콘텐츠에 대한 상세 정보가 출력되는 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를 가진 현재 클릭 이벤트 요소의 상위 요소를 가져오는 것입니다.