[javascript] 페이지의 아무 곳이나 클릭하여 Twitter Bootstrap 팝 오버를 닫으려면 어떻게해야합니까?

기존의 모든 답변은 모든 문서 이벤트를 캡처 한 다음 활성 팝 오버를 찾거나에 대한 호출을 수정하므로 상당히 약 합니다 .popover().

훨씬 더 좋은 방법은 show.bs.popover문서 본문의 이벤트 를 듣고 그에 따라 반응하는 것입니다. 아래는 문서를 클릭하거나 esc눌렀을 때 팝업을 닫고 팝 오버가 표시 될 때 이벤트 리스너 만 바인딩 하는 코드입니다 .

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    $.each(visiblePopovers, function() {
      $(this).popover("hide");
    });
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

답변