요소 외부 클릭을 감지하는 방법은 무엇입니까?

Question

사용자가 메뉴 헤더를 클릭하면 완전히 표시되는 HTML 메뉴가 있습니다. 사용자가 메뉴 영역 외부를 클릭할 때 이러한 요소를 숨기고 싶습니다.

jQuery를 사용하여 이것이 가능합니까?

$("#menuscontainer").clickOutsideThisElement(function() {
    // 메뉴 숨기기
});

Answer 1

들을 수 있습니다document 上的 click 事件，然后确保 #menucontainer 不是被单击元素的祖先或目标通过使用 .closest().

그렇지 않은 경우 클릭한 요소는 외부#menucontainer이므로 안전하게 숨길 수 있습니다.

으아악

편집 – 2017년 6월 23일

메뉴를 닫고 이벤트 듣기를 중지하려는 경우 이벤트 리스너 이후에 정리할 수도 있습니다. 이 기능은 새로 생성된 리스너만 정리하고 다른 클릭 리스너는 document에 남겨둡니다. ES2015 구문 사용:

으아악

편집 – 2018년 11월 3일

jQuery를 사용하고 싶지 않은 분들을 위해. 이는 위의 일반 바닐라JS(ECMAScript6) 코드입니다.

으아악

참고: 이것은 jQuery 부분 대신 !element.contains(event.target)를 사용하는 Alex의 의견을 기반으로 합니다.

그러나 element.closest() 이제 모든 주요 브라우저에서도 작동합니다(W3C 버전은 jQuery 버전과 약간 다릅니다). Polyfill은 여기에서 찾을 수 있습니다: Element.closest()

수정 – 2020-05-21

사용자가 요소 내부를 클릭하고 드래그한 다음 요소를 닫지 않고 요소 외부에서 마우스를 놓을 수 있도록 하려면 다음을 수행하세요.

으아악

in outsideClickListener:

으아악

Answer 2

닫힌 창의 문서 본문에 클릭 이벤트를 첨부합니다. 문서 본문으로의 전파를 중지하려면 컨테이너에 별도의 클릭 이벤트를 연결하세요.

으아아아