>  기사  >  웹 프론트엔드  >  jQuery는 팝업 레이어 외부의 아무 곳이나 클릭하여 팝업 레이어를 닫는 효과를 실현합니다.

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

高洛峰
高洛峰원래의
2016-12-09 16:12:291788검색

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


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.