即使有适当的回调，此点击功能仍在执行

Question

我一辈子都想不通为什么要执行这些函数。我理解绑定函数的正确语法如下。

$('#idOfThing').bind('click', foofunc);
function foofunc() { ///do things }

但是，我的代码出现问题。这些 binds/unbinds 中的一个工作，或者其他的不工作。我已经尝试了所有我能想到的组合。

$(window).on("load", function () {
         $('#divContactSticky').addClass("bottomDiv");
         $('#divContactSticky').bind('click', FillScreen);

         });

        var FillScreen = function() {
            $('#divContactSticky').unbind("click", FillScreen);
            $('#divContactSticky').css('height', '90vh');
        };

        function CancelForm() {
                $('#divContactSticky').css('height', '77px');
                $('#divContactSticky').bind('click', function () {
                    FillScreen();
                });
        }

这样做的目的是将 div 固定到 window 的底部。当用户点击 div。 ViewPort 将填充 div。在这个 div 里面是一个取消按钮。它是 html 并且 CancelForm() 将在单击时执行。显然一旦 div 被点击，我必须取消绑定该函数，否则 FillScreen 将在每次表单输入点击等时执行

我试过使 CancelForm() bind 函数与 load 回调类型相同。我已经尝试了一切。我已将 FillScreen = 设为匿名函数。我已经尝试了几乎所有我能想到的 return 类型的组合。我哪里错了？

编辑：

CancelForm 已改版，但问题仍然存在。如下所示的 CancelForm 立即执行 FillScreen。

function CancelForm() {
            $('#divContactSticky').css('height', '77px');
            $('#divContactSticky').bind('click', FillScreen);

    }

**编辑 2：**

@Radicate 有部分正确答案。 bind 和 on/off 之间有一个主要区别。下面的代码终于起作用了。

$(document).ready(function () {
    $('.cancelb').click(function () {
        CancelForm();
    });
    $('#divContactSticky').click(FillScreen);
}
$(window).on("load", function () {
         $('#divContactSticky').addClass("bottomDiv");
         $('#divContactSticky').on('click', FillScreen);

         });

        var FillScreen = function() {
            $('#divContactSticky').off("click", FillScreen);
            $('#divContactSticky').css('height', '90vh');
        };

        function CancelForm() {
                $('#divContactSticky').css('height', '77px');
                $('#divContactSticky').on('click', FillScreen);
                    event.stopPropagation()
                });
        }

Answer 1

您的第二个 bind() 电话未接通 FillScreen；它正在传递一个恰好调用 FillScreen.

的匿名函数

你永远不会解除绑定。

相反，您应该像之前那样直接绑定 FillScreen。

Answer 2

您遇到的是事件传播，因为取消按钮位于 div。

DOM 事件有两个阶段，捕获和传播 - 我们在大多数情况下（因为它大多是默认设置）处理的是传播阶段，事件在其中传播向上 DOM 树。

所以基本上我们要做的是在事件在取消按钮上触发时取消事件，在之前它也在div上触发，这将再次将我们的 div 调整为 90vh。

在 jQuery 中我们将使用 event.stopPropagation()

在这里阅读： https://api.jquery.com/event.stoppropagation/

如果您想了解更多有关事件发生方式的信息，我建议您阅读以下内容： https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm

正如@SLaks 所提到的，您的代码的另一错误是 unbind 的使用 - 您在其中尝试取消绑定匿名函数，而不是按照您绑定它的方式取消绑定 - 所以您只需增加 div 上的听众数量，这些听众就会一起触发。

无论如何，在这里使用 unbind 是不必要的，因为我们需要两个元素上的侦听器，我们将在需要时取消事件。

废话少说，下面是一个工作示例：

$(window).on("load", function() {
  $('#divContactSticky').addClass("bottomDiv");
  $('#divContactSticky').bind('click', FillScreen);
  $("button.cancel").click(function(){
  CancelForm();
  event.stopPropagation();
 });

});

var FillScreen = function() {
  $('#divContactSticky').css('height', '90vh');
};

function CancelForm() {
  $('#divContactSticky').css('height', '77px');
}

.bottomDiv {
  color:red;
}
#divContactSticky{
  border:1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContactSticky">
  divContactSticky
  <button class="cancel">
  Cancel
  </button>
</div>

即使有适当的回调，此点击功能仍在执行

This Click Function is Executing Even with Proper Callbacks

javascript

jquery

jquery-callback