다른 곳을 클릭하면 메뉴가 사라지도록 jQuery를 구현하는 방법_jquery

이 기사의 예에서는 다른 곳을 클릭할 때 메뉴가 사라지도록 jQuery를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //写要执行的内容....吥啦不啦
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

예를 들어 div를 클릭하면 메뉴가 표시됩니다. 다른 곳을 클릭하면 메뉴가 사라집니다. 문서를 클릭하면 메뉴가 표시됩니다. 메뉴를 숨기기만 하면 되지만 div를 클릭하면 문서를 클릭하는 것과 동일하므로 에서 실행할 명령문을 실행합니다. div의 클릭 이벤트를 실행한 다음 js의 버블링을 종료합니다. 그렇지 않으면 div의 클릭 이벤트가 실행되고 계속 버블링됩니다.

즉, div도 document에 속하므로 div를 클릭하면 document도 클릭됩니다. 따라서 아무런 제한 없이 div를 클릭하면 해당 제한의 특정 내용이 실행됩니다. 버블링을 중지하려면 div 메서드를 클릭하세요. 구체적인 방법은 e.stopPropagation() → "ie가 아닌 경우에 적용 가능" 메서드를 사용하는 것입니다. 즉, e.cancelBubble=true

또 다른 아이디어는 문서의 클릭 방식에 어떤 트리거 소스가 있는지 확인하는 것입니다. div인 경우 아무 작업도 수행되지 않습니다. 즉, div가 아닌 경우 메뉴가 숨겨집니다. 다음과 같이

이벤트 개체에는 target(W3C)/srcElement(IE)라는 중요한 속성이 포함되어 있습니다. 이 속성은 이벤트를 트리거한 원래 요소를 식별합니다. 이벤트 핸들러를 문서의 클릭 이벤트에 직접 바인딩할 수 있으며, 이벤트 핸들러에서 이벤트 소스가 id==test인 div 요소인지 아니면 하위 요소인지 확인할 수 있습니다. 그렇다면 return 메서드는 어떤 작업도 수행하지 않습니다. 그렇지 않으면 이벤트가 숨겨집니다.

$(document).bind('click',function(e){
    var e = e || window.event; //浏览器兼容性
    var elem = e.target || e.srcElement;
    while (elem) { //循环判断至跟节点，防止点击的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //点击的不是div或其子元素
});

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다. "jQuery 작업 json 데이터 기술 요약", "jQuery 스위칭 특집 요약 효과 및 기법", " jQuery 드래그 앤 드롭 특수 효과 및 기법 요약", "jQuery 확장 기법 요약", "일반적인 클래식 jQuery 요약 특수 효과", "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 일반 플러그인 및 사용 요약"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.