这是一种好的做法还是不好的做法？

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>

SCRIPT：

$(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'实际将输出写入屏幕吗？

Answer 1

是的，这样可行，但请勿尝试输入任何内容，并且您发现它无法到达return false;，因此它会提交;）

那说，试试这个：

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

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

Answer 2

这是一种好的做法还是不好的做法？

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

它有效，但它是一种传统功能。现代的方法是：

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

还可以更清楚地了解您正在做的事情：阻止浏览器的默认行为。

但在这种情况下，如Niet所说，使用普通按钮更合适，因此没有默认行为。让您远离疏忽，例如，在出现错误时如何不阻止默认行为。：）

其他次要评论：

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

Answer 4

是的，您可以随时返回以结束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/

可以＆＃39;返回＆＃39;用来打破JS功能？

4 个答案:

这是一种好的做法还是不好的做法？

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