jQuery가 특정 요소 외부의 클릭을 어떻게 감지할 수 있습니까?

jQuery를 사용하여 요소 외부 클릭 감지

대화형 웹 인터페이스를 처리할 때 특정 요소 내의 클릭과 해당 요소 내의 클릭을 구별해야 하는 경우가 많습니다. 경계 밖에서 발생합니다. jQuery의 강력한 기능을 활용하면 이 기능을 손쉽게 구현할 수 있습니다.

시나리오:

해더를 클릭하면 표시되는 HTML 메뉴 세트를 생각해 보세요. 목표는 사용자가 지정된 영역 밖의 아무 곳이나 클릭하면 자동으로 이러한 메뉴를 숨기는 것입니다.

jQuery 솔루션:

이 원하는 동작을 달성하려면 다음을 사용할 수 있습니다. jQuery 코드:

$(window).click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

이 코드에서는 전체 문서 창에 클릭 이벤트를 연결합니다. 창의 아무 부분이나 클릭하면 메뉴가 현재 표시되는지 확인합니다. 그렇다면 숨깁니다.

그러나 메뉴 컨테이너의 클릭 이벤트가 창의 클릭 이벤트를 트리거하는 것을 방지하기 위해 메뉴 컨테이너에 별도의 클릭 이벤트를 첨부합니다. 이 이벤트는 창 본문에 대한 클릭 이벤트 전파를 중지하여 해당 영역 내에서 메뉴를 클릭해도 메뉴가 계속 표시되도록 합니다.

참고:

stopPropagation을 사용하면 DOM에서 일반적인 이벤트 흐름이 중단될 수 있습니다. 가능하다면 클릭 이벤트를 보다 효과적으로 관리하기 위해 이벤트 위임 또는 "스택" 접근 방식과 같은 대체 방법을 고려하십시오.

위 내용은 jQuery가 특정 요소 외부의 클릭을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!