javascript - 父操作阻止在 ember.js 中调用提交操作

Question

我有一个div。该 div 有一个操作。 div 也有一个 form 标签作为子标签。该表单标签有一个提交操作。虽然我的 div 上有一个操作，但表单提交操作永远不会被调用。这是正确的吗？

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

在上面的 fiddle 中尝试删除 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中找到更多相关信息。

希望对你有帮助