javascript - 防止使用 Dojo 提交表单

Question

我有一个带有 jsId="saveParamButtonWidget"的 Dojo SubmitButton。我通过放置覆盖了它的 onClick 方法:

saveParamButtonWidget.onClick = editParam

我这样定义 editParam() 函数:

function editParam(eventObj) {
    dojo.stopEvent(eventObj);
    // ...
}

dojo.stopEvent() 应该停止事件冒泡和默认处理。但是，浏览器无论如何都会提交表单。我还尝试了以下内容:

function editParam(eventObj) {
    eventObj.stopPropagation();
    eventObj.preventDefault();
    // ...
}

同样的事情。我设法阻止表单提交的唯一方法是从事件处理程序返回“false”:

function editParam(eventObj) {
    // ...
    return false;
}

有人能告诉我为什么前两种方法不起作用吗？谢谢。

Answer 1

好的，在对源进行一些挖掘之后，我相信我可以明确地回答你的问题。

原因dojo.stopEvent()不起作用，但是 return false确实，完全是因为如何dijit.form.Button被编码。如果您有兴趣，是时候进行一次小型实地考察了。戴上安全帽。

当 dijit.form.Button被点击...

1. 按钮的 _onButtonClick方法被调用。 (这在模板中连接到特殊的 ondijitclick 事件，该事件不仅捕获鼠标点击，而且还捕获某些按键，用于 a11y 目的。)
2. _onButtonClick方法首先调用 _onClick方法，假定按钮未被禁用(在本例中不是)，调用并返回 onClick 的结果方法。这是特别有趣的，因为它是您要覆盖的方法!
3. 回到 _onButtonClick , 如果 _onClick 准确地返回 false (例如，如果您的 onClick 处理程序返回了 false )，_onButtonClick 立即退出。 这就是为什么返回 false 会使您的代码按预期工作。但是如果它没有退出会怎样？让我们进一步追踪...
4. 接下来，_onButtonClick检查此按钮是否不是实际 HTML 表单的后代，而是具有 _onSubmit 的小部件的后代方法(鸭子打字)。我假设在您的情况下，它是 真实 形式(dijit.form.Form 计数)，所以我们将跳过它。 (我的印象是这个代码路径实际上不会最终提交，而你的显然会。)
5. 检查一个最终条件:如果按钮有 valueNode定义(确实如此)，click调用此节点的方法。不幸的是，这会在不可见的 input type="submit" 上生成一个全新的事件对象节点在你的表单下，因此你试图告诉原始事件的任何内容都变得无关紧要，表单继续提交! 这就是为什么dojo.stopEvent没有工作 - 此代码在 dijit.form.Button完全不理会它。

我把它作为一个有限的概念证明(一定要打开 Firebug 等来获取日志):http://jsfiddle.net/Bf5H8/

也许这应该作为错误记录，但我想最初的想法可能是支持众所周知的 return false机制就足够了。

综上所述，覆盖表单的 onSubmit 很可能比覆盖按钮的 onClick 更符合您的兴趣(如 S.Jones 建议的那样)，但至少这应该可以解开谜团。

p>