Javascript Can'；返回'；是否用于中断JS函数？

我是一个初学者，试图从头开始写一些东西：我想把输入从文本字段“写”到文本区域。 所以我做了以下几点 （也可在上查看）

HTML:

我在这里使用“return”的目的正确吗？ 它能工作，它能做我想要的，但是。。。这是好的做法还是坏的做法？ 我把这个“return”放进去，因为如果我不放进去，页面在输入后会变成完全空的！ +我需要解释为什么会这样。

---

我想知道：我是否也可以使用“return”将输出写入屏幕？

是的，这会起作用，但尝试不键入任何内容，您会发现它不会到达

return false如此提交；）

也就是说，试试这个：

<button type="button">Make food</button>

制作食物

现在您不需要
返回false因为按钮只是一个按钮。
这是好做法还是坏做法？
在这种情况下，这是一种不好的做法<代码>返回false
防止默认行为和事件传播。例如，如果您希望停止默认行为但不停止传播，则可能会导致不必要的行为，反之亦然

最好使用事件上可用的函数来停止该操作。要使用这些函数，需要将事件作为参数。只需编写如下的单击函数：

$("button").click(function (e) { //Here e == Event
    //Do something
    e.stopPropagation(); //Prevent event from bubling
    e.preventDefault(); //Prevent the default behaviour of the HTML element
}

我需要解释一下为什么会这样
如上所述，
返回false
防止默认行为。
按钮的默认行为是发送表单。该操作将重新加载页面，因此页面将变为空白

为了应对这种情况，你只需要用你刚刚学到的东西来防止默认行为，等等

$(document).ready(function () {

    $("#fruit"); //What are those useless jQuery objects? ;)
    $("#salad");
    $("button").click(function (e) { //Don't forget the event
        e.preventDefault();
        var fruit = $("#fruit").val();
        var salad = $("#salad").val();

        if (fruit === "" || salad === "") {
            alert("Type in both ingredients in order to make something!!");
        } else {
            //alert("Would you like " + fruit + " with some " + salad + " to have for lunch?");
            var phrase = ("Would you like " + fruit + " with some " + salad + " to have for lunch?");
            document.getElementById("myText").innerHTML = phrase; //writes to the textarea
        }
    });

});

它可以工作，但它是一种遗留功能。实现这一点的现代方法是：

$(...).on('click', function(event) {
    event.preventDefault();
}

还可以更清楚地说明您在做什么：防止浏览器的默认行为

但在这种情况下，如Niet所说，只使用普通按钮更合适，因此没有默认行为。避免疏忽，例如，发生错误时如何不阻止默认行为。：）

其他次要意见：


您正在将此行为绑定到页面上的每一个
，当您添加第二个时，这将是令人惊讶的；你可能需要那个按钮上的id
当您使用纯文本时，不要使用
.innerHTML
！很容易意外地插入HTML标记，因为大多数情况下它似乎都能工作。改为分配给
.textContent
，或使用
$（…）.text（某些文本）
这对于机器人或scraper，或者当你的JS无法加载时，或者对于像我这样将JavaScript列入白名单的人来说，都不会很好地工作。：）（使用普通按钮而不是提交按钮的另一个原因！）在您进行实验时并不重要，但总的来说要记住一些好的东西。如果一个浏览器已经有了你想要的功能，只需使用它，然后在必要时添加JS
是的，您可以随时返回以结束JavaScript中的函数。页面消失的原因是它试图将表单数据发送到服务器；当然，由于您没有指定任何方法或操作，所以它什么也不做，因此空白页。
相反，您可以删除

<Form></Form>

小提琴示例：
是的，它也很普通。但是，按钮将提交表单，除非像Niet指出的那样指定了类型。：）哇！我不敢相信忘记输入“type”会有这样的效果！谢谢：-）显然，如果我真的要给按钮输入一个类型，我不需要删除
。我觉得很奇怪。@jolarti表单试图按按钮提交。如果指定按钮为type=“button”，则不再将其视为提交按钮。这就是为什么会发生这种行为。感谢您提供此替代解决方案。
$(...).on('click', function(event) {
    event.preventDefault();
}

<Form></Form>

$(document).ready(function () {

    $("button").click(function () {
        var fruit = $("#fruit").val();
        var salad = $("#salad").val();

        if (fruit === "" || salad === "") {
            alert("Type in both ingredients in order to make something!!");
            return; //end the function if this is invalid
        }
        var phrase = "Would you like " + fruit + " with some " + salad + " to have for lunch?";
        $("#myText").html(phrase); //writes to the textarea using jquery
    });
});