我一辈子都想不出为什么要执行这些功能。我了解绑定功能的正确语法如下。

$('#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()。显然,一旦单击div,我就必须取消绑定该函数,否则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()
                });
        }

最佳答案

您正在体验的是事件传播,因为“取消”按钮位于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>

07-24 09:46
查看更多