问题描述
我编写了一个网页,用户可以在其中输入存储在数据库中的日志条目,然后使用 ajax
检索并打印在页面上.我对 ajax
还是很陌生,想知道是否有人可以向我解释 return false;
在我的代码末尾做了什么?甚至有必要吗?
如果我把第二个ajax代码放在return false
之后,代码就不起作用了!你能解释一下为什么吗?
//处理提交表单而不重新加载页面$('#FormSubmit').submit(function(e) {//存储今天输入的数据var log_entry = $("#LogEntry").val();//阻止表单正常提交e.preventDefault();$.ajax({类型:'POST',url: 'behind_curtains.php',数据: {logentry:log_entry},成功:函数(){警报(日志条目);//提交后清除文本框$('#LogEntry').val("");//呈现成功文本然后淡出$("#entered-log-success").html("您的条目已被输入.");$("#entered-log-success").show().fadeOut(3000);}});//提交时在页面上打印新的日志条目$.ajax({类型:'POST',url: '/wp-content/themes/childOfFanwood/traininglog_behind_curtains.php',数据: {log_entries_loop: 真"},成功:功能(数据){警报(数据);$("#log-entry-container").html("");$("#log-entry-container").html(data);}});返回假;});
我将在这里写的内容适用于 jQuery 事件,
对于普通的 javascript 事件,请阅读 @T.J.答案底部的克劳德评论
return false
阻止了默认行为.例如,在 submit
事件中,它不会提交表单.
return false
也会停止冒泡,所以元素的父元素不会知道事件发生了.
return false
等价于 event.preventDefault()
+ event.stopPropagation()
当然,在 return xxx
行之后存在的所有代码都不会被执行.(和我知道的所有编程语言一样)
也许你觉得这有帮助:
停止事件冒泡 - 提高性能?
一个 真实" 演示来解释 return false
和 event.preventDefault()
之间的区别:
标记:
<form id="theForm" ><input type="submit" value="submit"/></表单></div>JavaScript:
$('#theDiv').submit(function() {警报('DIV!');});$('#theForm').submit(function(e) {警报('表格!');e.preventDefault();});
现在...当用户提交表单时,第一个处理程序是表单提交,其中 preventDefault()
-> 表单不会被提交,但事件会冒泡到 div, 触发它的提交处理程序.
现在,如果表单提交的处理程序将通过 return false
取消冒泡:
$('#theDiv').submit(function() {警报('DIV!');});$('#theForm').submit(function(event) {警报('表格!');返回假;//或者:event.preventDefault();event.stopPropagation();});
div 甚至不知道有表单提交.
return false
在 vanilla javascript 事件中做了什么
从 DOM2 处理程序 (addEventListener
) 返回 false 根本不做任何事情(既不会阻止默认设置也不会停止冒泡;来自 Microsoft DOM2-ish 处理程序(attachEvent
),它防止默认但不冒泡;从 DOM0 处理程序 (onclick="return ..."
),它防止默认(如果您在属性中包含返回)但不冒泡;从jQuery 事件处理程序,它两者兼具,因为那是 jQuery 的事情.详细信息和现场测试在这里 – TJ Crowder
I wrote a webpage where a user can enter a log entry that is stored on a database and then retrieved and printed on the page using ajax
. I am still quite new to ajax
and was wondering if somebody could please explain to me what does return false;
do at the end of my code? and is it even necessary?
If I put the second ajax code after the return false
the code does not work! can you please explain to me why?
//handles submitting the form without reloading page
$('#FormSubmit').submit(function(e) {
//stores the input of today's data
var log_entry = $("#LogEntry").val();
// prevent the form from submitting normally
e.preventDefault();
$.ajax({
type: 'POST',
url: 'behind_curtains.php',
data: {
logentry: log_entry
},
success: function() {
alert(log_entry);
//clears textbox after submission
$('#LogEntry').val("");
//presents successs text and then fades it out
$("#entered-log-success").html("Your Entry has been entered.");
$("#entered-log-success").show().fadeOut(3000);
}
});
//prints new log entries on page upon submittion
$.ajax({
type: 'POST',
url: '/wp-content/themes/childOfFanwood/traininglog_behind_curtains.php',
data: {
log_entries_loop: "true"
},
success: function(data) {
alert(data);
$("#log-entry-container").html("");
$("#log-entry-container").html(data);
}
});
return false;
});
解决方案 What I'll write here is true for jQuery events,
For vanilla javascript events read @T.J. Crowder comment at the bottom of the answer
return false
inside a callback prevents the default behaviour. For example, in a submit
event, it doesn't submit the form.
return false
also stops bubbling, so the parents of the element won't know the event occurred.
return false
is equivalent to event.preventDefault()
+ event.stopPropagation()
And of course, all code that exists after the return xxx
line won't be executed. (as with all programming languages I know)
Maybe you find this helpful:
Stop event bubbling - increases performance?
A "real" demo to explain the difference between return false
and event.preventDefault()
:
Markup:
<div id="theDiv">
<form id="theForm" >
<input type="submit" value="submit"/>
</form>
</div>
JavaScript:
$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(e) {
alert('FORM!');
e.preventDefault();
});
Now... when the user submit the form, the first handler is the form submit, which preventDefault()
-> the form won't be submitted, but the event bubbles to the div, triggering it's submit handler.
Now, if the form submit's handler would cancel the bubbling with return false
:
$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(event) {
alert('FORM!');
return false;
// Or:
event.preventDefault();
event.stopPropagation();
});
The div wouldn't even know there was a form submission.
What does return false
do in vanilla javascript events
这篇关于“返回假"是什么意思?做?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-11 20:37