'return' 可以用来破坏 JS 函数吗？

Question

我是一个初学者，正在尝试从头开始编写一些东西：我想将文本字段中的输入“写入”到文本区域。 所以我做了以下 （也可以在http://jsfiddle.net/jolarti/FX6xL/1/ 上查看）

HTML：

<input type='text' id='fruit' value='fruit'>
<br/>
<input type='text' id='salad' value='salad'>
<p>This is the meal you made:</p>
<textarea id="myText" rows="4" cols="50"></textarea>
<br />
<button>Make food</button>

脚本：

$(document).ready(function () {

    $("#fruit");
    $("#salad");
    $("button").click(function () {
        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
            return false; //i use this to end the script and not make the page disappear
        }
    });

});

我在这里使用“return”的目的是否正确？ 它可以工作并且可以满足我的要求，但是...这是好的做法还是不好的做法？ 我把这个'return'放进去，因为如果我不这样做，页面在输入后就完全空了！ + 我需要解释为什么会发生这种情况。 我想知道：我是否也可以使用 'return' 将输出实际写入屏幕？

Answer 1

是的，您可以随时返回以结束 JavaScript 中的函数。您的页面消失的原因是因为它正在尝试将表单数据发送到服务器；当然，由于您没有指定任何方法或操作，它什么也不做，因此是空白页。

相反，您可以删除

<Form></Form>

如果您不打算在按下按钮时将此信息发送回任何服务器，请标记。另外，您对 $("#fruit"); 的两次调用和 $("#salad");是不必要的，因为它们在选择节点后实际上并没有在节点上执行任何操作。你可以简单地将你的代码改成如下：

$(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
    });
});

小提琴示例：http://jsfiddle.net/FX6xL/2/

Answer 2

它有效，但它是一种遗留功能。这样做的现代方法是：

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

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

但在这种情况下，正如 Niet 所说，仅使用普通按钮更为合适，因此 没有默认行为。使您免于疏忽，例如，当出现错误时如何不阻止默认行为。 :)

其他次要的cmets：

• 您正在将此行为绑定到页面上的每一个<button>，一旦添加第二个<button>，这将是令人惊讶的；你可能想要那个按钮上的 id。
• 当你有纯文本时不要使用.innerHTML！意外注入 HTML 标记很容易，因为 大多数 它似乎在工作。请改为分配给.textContent，或使用$(...).text(some_text)。
• 这对于机器人或爬虫程序或当您的 JS 无法加载或像我这样将 JavaScript 列入白名单的人来说效果不佳。 :) （使用普通按钮而不是提交按钮的另一个原因！）在您进行实验时并不重要，但总体上要牢记这一点。如果浏览器已经有你想要的功能，就用它，如果需要的话，在上面添加 JS。

Answer 3

这是好的做法还是坏的做法？

在这种情况下，这是一种不好的做法。 return 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
}

我需要解释为什么会发生这种情况

如上所述，return false 阻止默认行为。 button 的默认行为是发送表单。该操作重新加载页面，因此它变为空白。

为了解决这个问题，您只需要阻止默认行为，等待它，您刚刚学到的！

$(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
        }
    });

});

Answer 4

是的，这可行，但尝试不输入任何内容，你会发现它没有到达return false;，所以它提交了；）

也就是说，试试这个：

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

现在您不需要return false;，因为按钮只是一个按钮。