Question

我在使用document.on（＆＃39;点击＆＃39;）事件时遇到了一些问题，我第一次打开表单时会点击“点击”字样。事件到文档，但它没有执行它，这是我所期望的。但是，当我关闭表单并尝试再次打开它时，该文档将点击＆＃39; click＆＃39;事件并立即执行。我想知道是否有办法解决这个问题。现在我使用setTimeout（...）函数作为解决此问题的hacky方法，但我正在寻找一种更好的方法来解决它。

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);

文档点击事件自我注册并立即执行

1 个答案: