使用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被点击...

_onButtonClick调用按钮的方法.(这是在模板中连接到特殊ondijitclick事件,它不仅捕获鼠标点击,而且还捕获某些按键,用于11个目的.)
该_onButtonClick方法首先调用该_onClick方法,假设该按钮未被禁用(在这种情况下不是),调用并返回该onClick方法的结果.这是特别令人感兴趣的,因为它是你压倒一切的方法!
回过头来_onButtonClick,如果准确地_onClick返回(例如,如果您的经理人返回),立即退出. 这就是为什么返回false会使您的代码按预期工作.但是如果没有在那里拯救会发生什么呢？让我们进一步追踪...... falseonClickfalse_onButtonClick
接着,_onButtonClick检查该按钮是否不实际的HTML形式的后代,但是与微件的后代_onSubmit方法(鸭打字).我假设在你的情况下它是一个真实的形式(dijit.form.Form计数),所以我们将跳过这个.(我的印象是这个代码路径实际上不会最终提交,而你的代码路径确实会提交.)
检查最后一个条件:如果按钮具有已valueNode定义的(确实如此),click则调用此节点的方法.不幸的是,这会在您的表单下的不可见节点上生成一个全新的事件对象input type="submit",因此您尝试告诉原始事件的任何内容都是无关紧要的,并且表单继续提交! 这就是为什么dojo.stopEvent不起作用的原因 - 这段代码dijit.form.Button完全没有理由付出代价.

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

也许这应该被记录为一个bug,但我想最初的想法可能是支持这个众所周知的return false机制就足够了.

所有这一切都说,很有可能覆盖onSubmit的形式更符合你的兴趣而不是覆盖按钮的onClick(正如S.Jones所建议的那样),但至少这应该解决这个谜团.