防止与Dojo提交表单 [英] Preventing form submission with Dojo

问题描述

我有一个Dojo SubmitButton与jsId =saveParamButtonWidget。我把它的onClick方法覆盖了：

  saveParamButtonWidget.onClick = editParam 
  pre> 
 
 
我定义了这样的editParam（）函数：
  function editParam（eventObj）{
 dojo.stopEvent（eventObj）; 
 // ... 
} 
  
 dojo.stopEvent（）停止事件冒泡和默认处理。但是，浏览器也会提交表单。我还尝试了以下内容：
  function editParam（eventObj）{
 eventObj.stopPropagation（）; 
 eventObj.preventDefault（）; 
 // ... 
} 
  
同样的事情。我设法阻止表单提交的唯一方法是从事件处理程序返回false：
  function editParam（eventObj ）{
 // ... 
 return false; 
} 
  
有人可以告诉我为什么前两种方式不起作用？谢谢。
解决方案
好的，在通过源码挖掘之后，我相信我可以肯定地回答你的问题。 
 
 
原因 dojo.stopEvent（）不起作用，但 return false 完全是由于 dijit.form.Button 的编码方式。如果你有兴趣，那是时候进行一次实地考察了。保持你的帽子。
 
 
 
当 dijit.form.Button 被点击... 
 
 
调用按钮的 _onButtonClick 方法。 （这是在模板中连接到特殊的 ondijitclick 事件，不仅捕获鼠标点击，而且捕获某些按键，以达到目的。）
 
 
  _onButtonClick 方法首先调用 _onClick 方法，假设该按钮未被禁用（它是不在这种情况下），调用并返回  onClick 方法的结果。这是特别感兴趣的，因为它是你重写的方法！
 
 
回到 _onButtonClick ，如果 _onClick 正确地   false （例如，如果您的 onClick 退回 false ）， _onButtonClick  立即退出。 这就是为什么返回false会使你的代码按照需要工作。但是，如果 不保护那里会发生什么呢？让我们进一步跟踪... 
 
 
接下来， _onButtonClick 检查这个按钮是否不是一个实际的HTML表单，但是具有 _onSubmit 方法（duck-typing）的小部件的后代。我假设在你的情况下，是         所以我们会跳过这个。 （我的印象是这个代码路径实际上不会最终提交，而你的显然是这样。）
 
 
检查一个最后的条件：如果按钮有一个 valueNode 定义（它），调用该节点的点击方法。不幸的是，这在您的表单下的无形输入type =submit节点中产生了一个全新的事件对象，因此您尝试告诉原始事件变得无关紧要，形式继续提交！ 这就是为什么 dojo.stopEvent 无效 -   dijit.form.Button 中的代码绝对支付不要注意。
 
 
我把这个做成了一个有限的概念证明（一定要打开firebug / etc 。获取日志）： http://jsfiddle.net/Bf5H8/  
 
 
 
也许这是一个应该被记录为一个bug的东西，但我想最初的想法可能是支持着名的返回false 这个机制就够了。
 
 
 
所有这一切都被说出来，绝对可能的是，覆盖表单的提交更符合你的兴趣，而不是超越按钮的onClick S.Jones建议），但至少应该解决这个谜。
 
I have a Dojo SubmitButton with jsId="saveParamButtonWidget". I overrided its onClick method by putting:
saveParamButtonWidget.onClick = editParam
I defined the editParam() function like this:
function editParam(eventObj) {
    dojo.stopEvent(eventObj);
    // ...
}
dojo.stopEvent() is supposed to stop event bubbling and default processing. However, the browser will submit the form anyway. I also tried with the following:
function editParam(eventObj) {
    eventObj.stopPropagation();
    eventObj.preventDefault();
    // ...
}
Same thing. The only way I've managed to prevent form submission is by returning "false" from the event handler:
function editParam(eventObj) {
    // ...
    return false;
}
Can someone tell me why the first two ways did not work? Thanks.
解决方案
Okay, after doing some digging through the source, I believe I can answer your question definitively.

The reason dojo.stopEvent() doesn't work, but return false does, is entirely due to how dijit.form.Button is coded.  If you're interested, it's time for a little field trip.  Keep your hard hats on.

When a dijit.form.Button is clicked...

The button's _onButtonClick method is invoked.  (This is hooked up in the template, to the special ondijitclick event which captures not only mouse click but also certain keypresses, for a11y purposes.)
The _onButtonClick method first invokes the _onClick method, which, presuming the button is not disabled (which it's not in this case), invokes and returns the result of the onClick method.  This is of particular interest since it's the method you're overriding!
Coming back to _onButtonClick, if _onClick returned precisely false (e.g. if your onClick handler returned false), _onButtonClick immediately bails out.  This is why returning false makes your code work as desired. But what happens if it doesn't bail out there?  Let's follow the trail further...
Next, _onButtonClick checks whether this button not a descendant of an actual HTML form, but is a descendant of a widget with an _onSubmit method (duck-typing).  I'm assuming that in your case it is inside a real form (dijit.form.Form counts), so we'll skip over this.  (I am under the impression that this code path wouldn't actually end up submitting, whereas yours apparently does.)
One final condition is checked: if the button has a valueNode defined (it does), the click method of this node is invoked.  Unfortunately, this produces an entirely new event object on an invisible input type="submit" node under your form, and thus anything you tried to tell the original event is rendered immaterial, and the form goes on to submit!  This is why dojo.stopEvent did not work - this code in dijit.form.Button pays it absolutely no heed.
I cooked this up as a somewhat-limited proof of concept (be sure to open firebug/etc. to get the logs): http://jsfiddle.net/Bf5H8/

Perhaps this is something that should be logged as a bug, but I suppose the initial thought may have been that supporting the well-known return false mechanism would be enough.

All this being said, it's quite possible that overriding onSubmit of the form is more in-line with your interests than overriding the button's onClick anyway (as S.Jones suggested), but at least this should solve the mystery.

                        
这篇关于防止与Dojo提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！