jquery 특정 영역 외부 클릭 시 이벤트 발생

 

 

 

jQuery를 사용하여 특정 영역 외부를 클릭했을 때 이벤트를 발생시키려면 $(document).on("click") 이벤트를 활용합니다. 클릭한 위치가 특정 영역 내부인지 확인하고 그렇지 않으면 원하는 동작을 수행하도록 처리할 수 있습니다.

---

 

기본 코드 예제

$(document).ready(function () {
  $(document).on("click", function (event) {
    // 특정 영역 선택 (예: #targetElement)
    if (!$(event.target).closest("#targetElement").length) {
      // 특정 영역 외부를 클릭했을 때 실행될 동작
      console.log("특정 영역 외부를 클릭했습니다!");
      // 추가 동작 작성
    }
  });
});

---

코드 설명

1. $(document).on("click")
   • 문서 전체에서 클릭 이벤트를 감지합니다.
2. event.target
   • 사용자가 클릭한 요소를 반환합니다.
3. closest(selector)
   • 클릭된 요소가 지정된 셀렉터(예: #targetElement) 내부에 있는지 확인합니다.
   • 지정된 셀렉터와 일치하는 가장 가까운 부모 요소를 찾으며 일치하는 요소가 없으면 null을 반환합니다.
4. length 확인
   • .length가 0이면 특정 영역 외부를 클릭한 것으로 간주합니다.

---

 

특정 영역 외 클릭 시 숨기기

$(document).ready(function () {
  $(document).on("click", function (event) {
    if (!$(event.target).closest("#dropdownMenu").length) {
      $("#dropdownMenu").hide(); // 특정 영역 숨기기
      console.log("드롭다운 메뉴를 닫습니다.");
    }
  });
});

---

 

여러 영역을 제외한 클릭 처리

$(document).ready(function () {
  $(document).on("click", function (event) {
    if (!$(event.target).closest("#area1, #area2").length) {
      console.log("area1과 area2 외부를 클릭했습니다.");
      // 다른 동작 실행
    }
  });
});

---

 

클릭 이벤트 중지 (특정 영역 내부 클릭 시)

$(document).ready(function () {
  $("#targetElement").on("click", function (event) {
    event.stopPropagation(); // 클릭 이벤트 전파 중지
    console.log("특정 영역 내부를 클릭했습니다.");
  });

  $(document).on("click", function () {
    console.log("특정 영역 외부를 클릭했습니다.");
  });
});

---

 

요약

• 특정 영역 외부를 클릭했을 때의 동작을 처리하려면 event.target과 .closest()를 활용합니다.
• 여러 영역을 제외하거나 내부 클릭 이벤트를 중지하려면 추가 조건이나 event.stopPropagation()을 사용합니다.

 

 

 

 

 

 

 

 

#jquery #특정영역외부클릭시 #특정영역외부클릭시이벤트발생