javascript - onClick 函数导致 Chrome 刷新

Question

我在 Chrome 上遇到了一个非常奇怪的行为。当我点击添加按钮时，以下代码会导致页面在 Chrome 上刷新，这不是我想要的:

function addSpamAddr() 
{
    var email = prompt("Add Spam Address","");
    if (email == null || email == "")
        return false;

    var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (regex.test(email) == false) {
        alert("You must enter a valid E-Mail address");
        return false;
    }


    var listBox = document.getElementById('spamList');
    for (var x = 0; x < listBox.options.length; x++) {
        if (listBox.options[x].value == email || listBox.options[x].text == email) {
            alert("Already blocked address");
            return false;
        }
    }

    var selectBoxOption = document.createElement("option");
    selectBoxOption.value = email;
    selectBoxOption.text = email;
    listBox.add(selectBoxOption);

    return false;
}


...
<button style="margin-right: 20px;width:60px" onclick="addSpamAddr()">Add</button>

该代码在 Internet Explorer 上运行良好。我创建了一个最小示例来进一步调查该问题:

function addSpamAddr()
{
   return false;
}
...
<button style="margin-right: 20px;width:60px" onclick="addSpamAddr()">Add</button>

仍然会导致 Chrome 刷新。

如何防止刷新？

编辑:在 onclick 事件中添加 return 语句后，页面不再刷新我创建的最小示例。

<button style="margin-right: 20px;width:60px" onclick="return addSpamAddr()">Add</button>

但是，如果我应用我的原始代码，页面仍会刷新。特别是，这部分导致它:

    var listBox = document.getElementById('spamList');
    var exists = false;
    for (var x = 0; x < listBox.options.length; x++) {
        if (listBox.options[x].value == email || listBox.options[x].text == email) {
            alert("Already blocked address");
            return false;
        }
    }

我该如何解决这个问题？

Answer 1

这样写

function addSpamAddr()
{
   return false;
}
...
<button style="margin-right: 20px;width:60px" onclick="return addSpamAddr()">Add</button>

你必须在我更新的 html 代码中写 "return addSpamAddr()"