文檔單擊事件會自行注冊並立即執行

Question

我在document.on（'click'）事件中遇到了一些問題，第一次打開表單時，它會將'click'事件綁定到文檔，但它不執行它，這正是我所期望的。 但是，當我關閉表單並嘗試再次打開它時，文檔將綁定“ click”事件並立即執行。 我想知道是否有辦法解決這個問題。 現在，我正在使用setTimeout（...）函數作為解決此問題的簡便方法，但我正在尋找一種更好的方法來修復它。

initXXXXForm = function() {
  var $form = $('.zzzz'),
      $formOpen = $('.xxxx'),
      $formClose = $( '.yyyy' ),
      $formMask = $('.wwww'),
      toggleForm = function() {
        if ($form.hasClass('active') === true) {
          // close form
          $form.removeClass('active');
          $formMask.removeClass('active');
          $(document).off('click'); // remove event on document to close form
        }
        else {
          // open form
          $form.addClass('active');
          $formMask.addClass('active');

          // bind close event when clicking outside form, set short timeout so this click event doesn't interfere with others
          setTimeout(function() {
            $(document).on('click', function(e) {
              if ($(e.target).closest('.xxxx-form').length === 0 ) {
                $(this).off('click');
                toggleForm();
              }
            });
          }, 100);
        }
      };

  $formOpen.on('click', function() {
    toggleForm();
  });

}

Answer 1

您如何將最后一條語句更改為此：

$formOpen.off("click", toggleForm).on("click", toggleForm);