我一辈子都想不出为什么要执行这些功能。我了解绑定功能的正确语法如下。
$('#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>