요소 외부 클릭을 감지하는 방법은 무엇입니까?
P粉113938880
2023-08-23 13:37:35
<p>사용자가 메뉴 헤더를 클릭하면 완전히 표시되는 HTML 메뉴가 있습니다. 사용자가 메뉴 영역 외부를 클릭할 때 이러한 요소를 숨기고 싶습니다. </p>
<p>jQuery를 사용하여 이것이 가능합니까? </p>
<pre class="brush:php;toolbar:false;">$("#menuscontainer").clickOutsideThisElement(function() {
// 메뉴 숨기기
});</pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
들을 수 있습니다
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:닫힌 창의 문서 본문에 클릭 이벤트를 첨부합니다. 문서 본문으로의 전파를 중지하려면 컨테이너에 별도의 클릭 이벤트를 연결하세요.
으아아아