Element click outside event

前端工程
#1

情境

判斷使用者是否點擊對象 element 外部
對象 element 可能是多層的物件
例如： 點擊 modal 外，關閉該 modal

e.g.

<div class="my-element">
  <h3>title</h3>
  < article >content</article >
</div>

h3, article tag 都屬於對象 element 內 (.my-element)


// 註冊事件
document.addEventListener('click', closeWhenClickOutside);

// 定義事件
closeWhenClickOutside(event) {
  if (event && document.querySelector('.modal-container').contains(event.target)) {
    // 使用者點擊於對象 element (.my-element) 內
    return;
  }
  // 使用者點擊對象 element 外
}

// 離開或結束時記得反註冊事件
document.removeEventListener('click', closeWhenClickOutside);

demo code pen 待補…