page_javascript 기술의 다른 곳을 클릭하여 div를 숨기는 두 가지 방법

아이디어 1

첫 번째 아이디어는 두 단계로 나뉩니다

첫 번째 단계: div를 숨기기 위해 문서의 클릭 이벤트에 이벤트 핸들러를 바인딩합니다.

2단계: 이벤트 핸들러를 div의 click 이벤트에 바인딩하여 이벤트가 문서에 버블링되는 것을 방지하고 문서의 onclick 메소드를 호출하면 div가 숨겨집니다.

코드 복사 코드는 다음과 같습니다.

이렇게 하면 페이지의 div가 아닌 영역을 클릭하면 문서의 onclick 메서드가 직접 호출되거나 레이어별로 호출되어 div 또는 해당 하위 요소를 클릭하면 이벤트가 발생합니다. 항상 div 자체까지 버블링되어 이벤트가 계속 발생하는 것을 방지하고 문서의 onclick 메서드가 호출되지 않아 div가 숨겨지므로 우리의 요구 사항이 충족됩니다.

아이디어 2
앞서 DOM에서 이벤트가 트리거되면 이벤트 객체 이벤트가 생성된다고 언급했습니다. 이 객체에는 이벤트와 관련된 모든 것이 포함됩니다. 이벤트를 생성한 요소, 이벤트 유형 및 기타 관련 정보를 포함한 정보는 첫 번째 아이디어에서 div의 클릭 이벤트 핸들러에 의해 전달된 매개변수입니다. 이벤트 핸들러를 지정하는 방법에 따라 IE에서 이벤트 객체에 액세스하는 방법에는 여러 가지가 있습니다. 이벤트 핸들러를 DOM 요소에 직접 추가하면 이벤트 객체가 window 객체의 속성으로 존재합니다.

이벤트 개체에는 target(W3C)/srcElement(IE)라는 중요한 속성이 포함되어 있습니다. 두 번째 아이디어는 이 속성을 사용하는 것입니다. 이벤트 핸들러를 문서의 클릭 이벤트에 직접 바인딩할 수 있으며 이벤트 핸들러에서 이벤트 소스가 id==test인 div 요소인지 아니면 하위 요소인지 여부를 확인할 수 있습니다. 그렇다면 return 메서드는 어떤 작업도 수행하지 않습니다. 그렇지 않으면 이벤트가 숨겨집니다.

코드 복사 코드는 다음과 같습니다.

이런 방식으로 페이지의 아무 곳이나 클릭하면 클릭 이벤트가 document 및 이벤트 핸들러는 소스가 id==test가 있는 div인지 하위 요소인지, 메소드 반환인지 여부를 결정하고, 그렇지 않은 경우 div를 숨겨도 우리의 요구 사항을 충족할 수 있습니다.