这个点击功能即使用适当的回调也能执行

Question

我不能为我的生活指出为什么这些功能正在执行。我理解用于绑定函数的正确语法如下。

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

但是，我的代码正在进行中。这些绑定/解除绑定中的任何一个都起作用，或者其他绑定/解绑定不起作用。我尝试过所有我能想到的组合。

$(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固定在窗口的底部。当用户点击该div时。 ViewPort将填满div。在这个div里面有一个取消按钮。它是html，并且CancelForm（）将在点击时执行。显然，一旦格被点击时，我不得不取消绑定功能，或FillScreen都会在每一个表单输入执行点击等

我试图使CancelForm() bind功能一样load回调类型。我已经尝试了一切。我已将FillScreen =设为匿名功能。我已经尝试了几乎所有我能想到的返回类型的组合。我哪里错了？

编辑：

CancelForm已经收到了改造，并且问题仍然存在。如下所示的CancelForm立即执行FillScreen。

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

    } 

**编辑2：**

@Radicate有部分正确的答案。绑定和开/关之间有一个主要区别。下面的代码是最终工作的。

$(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

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

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

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

在jQuery中，我们将与event.stopPropagation()

读做这件事的位置： https://api.jquery.com/event.stoppropagation/

如果你想了解更多有关事件经过的路上，我建议你阅读本： https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm

您的代码出错了，正如@SLaks提到的那样，您可以使用unbind--其中您尝试解除匿名函数的绑定，而不是按照绑定方式解除绑定 - s o你只是增加你的div上的听众数量，这些都会一起触发。

无论如何，在这里使用unbind是不必要的，因为我们希望两个元素都有监听器，我们只需要在需要时取消事件。

少废话，这里是一个工作示例：

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

 
}); 
 

 
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>

Answer 2

你的第二个电话bind()没有经过FillScreen;它传递了一个匿名函数，该函数恰好称为FillScreen。

你从来没有解开那个。

相反，您应该像以前一样直接绑定FillScreen。