2

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;
        }
    }

これを修正するにはどうすればよいですか?

4

1 に答える 1

6

このように書く

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

"return addSpamAddr()"あなたは、私が更新したHTMLコードに書き込む必要があります

于 2013-01-03T07:36:28.560 に答える