요소 외부 클릭을 감지하는 방법은 무엇입니까?
P粉113938880
P粉113938880 2023-08-23 13:37:35
0
2
464
<p>사용자가 메뉴 헤더를 클릭하면 완전히 표시되는 HTML 메뉴가 있습니다. 사용자가 메뉴 영역 외부를 클릭할 때 이러한 요소를 숨기고 싶습니다. </p> <p>jQuery를 사용하여 이것이 가능합니까? </p> <pre class="brush:php;toolbar:false;">$("#menuscontainer").clickOutsideThisElement(function() { // 메뉴 숨기기 });</pre> <p><br /></p>
P粉113938880
P粉113938880

모든 응답(2)
P粉212114661

들을 수 있습니다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:

으아악
P粉333186285

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

으아아아
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!