UI / 로그인 모달창의 검은색 배경 클릭하면, 모달창 없어지게 만들기

• 문제상황
  • 이벤트 버블링때문에, 로그인창을 클릭했을 때, 로그인창은 검은색 배경에 포함되어있기때문에, 검은색 배경도 클릭했다고 컴퓨터가 인지한다.
• 해결방법
  • 컴퓨터가 실제로 클릭한 것만 인지하도록 해야한다.
• 설명
  • 이벤트의 익명함수에 매개변수 e를 추가한다.
  • 조건문 만든다.
  • e.target === e.currentTarget
    • e.currentTarget 검은색 배경을 의미한다.
    • 검은색 배경을 클릭하면, 조건문이 참이다.
  • 모달창이 꺼진다.
• 개념
  • e.target 지금 실제로 클릭한 요소
  • e.currentTarget 이벤트 리스너가 달린 곳
  • $(this) 이벤트 리스너가 달린 곳, jQuery버전
    • this 이벤트 리스너가 달린 곳, javascript버전
  • e.preventDefault(); 기본 동작 막기

$(".black-background").on("click", function (e) {
  if (e.target === e.currentTarget) {
    $(".black-background").addClass("slide-up");
  }
});