Question

我有以下简单形式：

<form action="" id="myForm">
    Use <code>return false</code> (if not checked,
    <code>e.preventDefault()</code> will be used):
    <input type="checkbox" id="myCheckbox" checked>

    <br/>

    <input type="submit" value="Submit me">
</form>

然后，JavaScript方面：

document.getElementById("myForm").addEventListener("submit", function (e) {
    if (document.getElementById("myCheckbox").checked) {
        return false;    
    }
    e.preventDefault();
});

为什么return false 不会阻止默认行为，而e.preventDefault()可以正常工作？

根据this answer：

  当你打电话时，
return false正在做三件事：


event.preventDefault();

event.stopPropagation();

停止回调执行并在调用时立即返回。

因此，event.prevendDefault()被调用。这只发生在jQuery回调中吗？

JSFIDDLE

Answer 1

由于您通过addEventListener附加了您的活动，而不是通过HTML onsubmit元素本身的form属性，因此您需要通过传递给的事件设置返回值使用returnValue的事件处理程序。这就是为什么你看到preventDefault工作的原因 - 因为它是事件的属性。试试这个：

document.getElementById("myForm").addEventListener("submit", function (e) {
    if (document.getElementById("myCheckbox").checked) {
        e.returnValue = false; // <- Note
    }
    else {
        e.preventDefault();
    }
});

Updated fiddle

不同之处在于，由于未调用return，执行将继续传递该语句，因此您需要相应地修改逻辑。因此，我添加了else块。

e.preventDefault（）会阻止默认行为，但不会返回false。为什么？

1 个答案: