시작

메뉴에서 클릭하면 목록이 밑에 표시되고 그때 상관없는 곳을 클릭하면 닫히는 기능이 어떻게 이루어지는지 보여주고 싶습니다.
(디자인이 너무 잘 맞아서 전달한 건지...)
이번엔 Vue야.js로 이루어진 상황을 설명하고 싶습니다.

2020/04/16 추기
여러 가지 기사를 봤는데 vue-click-outside 라는 라이브러리가 있는 것 같아요. 이걸 사용하면 아래의 설치를 하지 않아도 돼요.
https://www.npmjs.com/package/vue-click-outside
그러니까 자기가 설치하면 어떻게 하는지 알고 싶은 사람만 계속 m(__)m

구현 방법

1. 전체 클릭 시 닫기

우선 클릭과 무관한 곳에서도 이벤트를 주울 수 있도록 윈도우에서 이벤트 청중을 주운다.
"addEventListener"라는 변수에 저장하는 방법은 ddEventListener에 구성 요소를 등록하고 삭제할 때 이벤트를 삭제해야 하기 때문입니다.

new Vue.extend({
  mounted() {
    // windowにイベントリスナーをセットする
    window.addEventListener('click', this._onBlurHandler = (event) => {
      this.$data.isOpen = false; // 表示フラグをOFFにする
    });
  },
  beforeDestroy() {
    // コンポーネントが破棄されるタイミングにイベントリスナーも消す
    window.removeEventListener('click', this._onBlurHandler);
  }
});

2. 자신의 요소에 포함되지 않은 위치를 클릭할 때만 닫기

상술한 방법도 닫을 수 있지만 아래 목록의 내용을 누르면 닫습니다.
드롭다운 목록에서 컨텐트를 클릭할 때 아무 것도 하지 않고 다른 위치만 클릭할 때 닫는 경우 요소의 this._onBlurHandler 메서드를 사용하여 확인합니다.
구체적으로 말하면 contains은 사건의 원시 원소로 ref에서 적당한 위치를 설정하고 이 원소가 event.target 방법을 포함하는지 검사한다.

window.addEventListener('click', this._onBlurHandler = (event) => {
  // targetがコンポーネントの中に含まれているものなら何もしない
  if (this.$refs.elRoot.contains(event.target)) {
    return;
  }
  this.$data.isOpen = false;
});

끝날 때

상관없는 곳에서 클릭할 때 닫는 이런 처리는 의외로 잘하려고 하면 잘 안 돼서 기사로 정리됐습니다.
샘플 코드는 아래에 두고 관심 있으신 분들은 확인해 주세요.
See the Pen 드롭다운 목록 by wintyo ( @wintyo )
on CodePen .

잡담

참고로 이 방법을 하기 전에 나는 contains 윈도우가 이벤트를 보내지 않을 때까지 닫고 싶지 않은 요소로 불렀다.다만 이렇게 하면 다른 드롭다운 목록을 눌렀을 때 다른 드롭다운 요소가 닫히지 않아 어려운 점이 많다p>