Question

我有一个div。那个div有一个动作。 div还有一个表单标签作为孩子。该表单标记具有提交操作。虽然我的div上有一个动作，但表单提交动作永远不会被调用。这是对的吗？

http://emberjs.jsbin.com/jeyaxodugi/1/edit?html,js,console,output

在上面的小提琴中尝试删除div的动作然后表单提交动作将正常工作。如何确保不仅调用父操作而且还调用这两个操作。

Answer 1

默认情况下，操作帮助程序将调用Event#preventDefault，因此当您单击提交按钮时，将执行divClick，将调用preventDefault，因此将不会调用formSubmit。为避免这种情况，您可以使用preventDefault=false选项{{ action "divClick" preventDefault=false}}>。在此之后，您会注意到，如果您单击提交按钮，将触发divClick和formSubmit，这是因为点击事件从按钮冒泡到div，如果您不这样做想要出现这种情况，您可以在提交按钮中使用bubbles=false，例如以下<input type="submit" value="submit" {{action "formSubmit" bubbles=false}}>

这是最终代码

<div id="my-div" {{ action "divClick" preventDefault=false}}>
  Hello World
  <form {{action "formSubmit" on="submit" }}>
    <input type="submit" value="submit" {{action "formSubmit" bubbles=false}}>
  </form>
</div>

更新的jsbin http://emberjs.jsbin.com/doroqocafu/1/edit?html,js,output

您可以在action helper docs

中找到有关此内容的更多信息

我希望它有所帮助

父操作可防止在ember.js中调用表单提交操作

1 个答案: