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

Parent action prevents from submit action from ever being called in ember.js

本文关键字：操作 调用 提交 js ember 可防止      更新时间：2023-09-26

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

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

在上面的小提琴中，尝试删除div的操作，然后表单提交操作将正常工作。如何确保这两个操作都不只是父级调用。

默认情况下，操作帮助程序将调用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

可以在操作帮助程序文档中找到有关此内容的详细信息

我希望它有所帮助

相关文章：