Event.preventDefault() 不起作用，表单提交了两次

Question

我有两个页面，两种形式基本一样，有条带元素，但是一个有额外的字段，另一个没有。

带有额外字段event.preventDefault() 的表单似乎并没有停止表单提交，因此表单被提交了两次，但没有额外字段的表单不会。

为什么一种形式是isTrusted === true 而另一种形式是isTrusted === false？这是什么控制的？

这可能是preventDefault() 不起作用的原因吗？

经过更多测试，我发现：

<%= form_tag add_card_path(@product.id), id: "payment-form" do

不提交两次，但是

<%= form_with add_card_path(@product.id), id: "payment-form" do 

确实提交了两次，因此preventDefault() 不起作用。

为什么会这样？

<%= form_tag add_card_path(@product.id), id: "payment-form" do %>
  <div class="form-row">
    <div id="card-errors" role="alert" class="col"></div>
  </div>
  <div class="form-row">
    <div id="card-element" class="col"></div>
  </div>
  <div class="form-row mt-3">
    <button class="btn_spinner col btn md-width-auto btn-primary">Add Card</button>
  </div>
<% end %>

Javascript：

// Handle form submission.
var form = document.getElementById(thatInstance.formId);
form.addEventListener('submit', function (event) {
  event.preventDefault();
  debugger;
  thatInstance.createStripeToken();
});

从调试器检查事件对象：

工作页面：

事件对象：

bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: <form id="payment-form">
defaultPrevented: true
eventPhase: 2
isTrusted: false
returnValue: false
srcElement: <form id="payment-form">
target: <form id="payment-form">
timeStamp: 20826
type: "submit"

非工作页面：

事件对象：

bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: <form id="payment-form">
defaultPrevented: true
eventPhase: 2
isTrusted: true
returnValue: false
srcElement: <form id="payment-form">
target: <form id="payment-form">
timeStamp: 23652
type: "submit"

解决方案：

需要data-remote === false，不知道为什么。

Form_with 有data-remote === true，而form_tag 有data-remote === false。

Answer 1

来自MDN关于Event.isTrusted：

Event 接口的isTrusted 只读属性是Boolean，当事件由用户操作生成时为true，当事件由用户操作生成时为false事件由脚本创建或修改，或通过EventTarget.dispatchEvent() 发送。

来自MDN关于Event.preventDefault()：

为不可取消的事件调用 preventDefault()，例如通过 EventTarget.dispatchEvent() 调度的事件，而不指定 cancelable: true 无效。

Answer 2

在 Rails 中 form_with() 和 form_tag() 的操作方式不同。

根据这篇文章：

https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a

"form_with 生成的所有表单默认都将通过 XHR (Ajax) 请求提交。不需要指定 remote: true，因为您必须使用 form_tag 和 form_for。"

因此，将远程设置为 false（本地：true）或使用 form_tag 解决了问题，因为 .preventDefault 停止本地提交，而不是 ajax 提交。