e.preventDefault()失效：表单提交仍刷新页面问题排查

嘿，我看到问题啦！你的代码里有两个关键问题导致e.preventDefault()没起作用，咱们一步步来解决：

问题1：未传递事件对象给处理函数 #

你在表单的onsubmit属性里写的是testJS()，这种调用方式没有把表单提交的事件对象传递给函数。这就导致testJS里的参数e是undefined，根本没法执行e.preventDefault()来阻止默认提交行为。

正确的写法应该是在调用时传入event对象：

<form onsubmit='testJS(event)' method='POST' id='orderForm' style='margin-top: 5%;'>

问题2：提交按钮的type属性无效 #

你的按钮设置了type='mailadress'，这不是HTML按钮的合法类型值。浏览器遇到未知的type时，会默认把按钮当作type='submit'来处理——这意味着即使你修复了事件传递，浏览器还是会触发默认的表单提交刷新。

把按钮的type改成合法的submit即可：

<button type='submit' id='mailB' name='mailBtn'> Beställ </button>

修正后的完整代码 #

if (getCookie('cart') != null) { 
  document.write("<button onclick='deleteCartCookie()''>Töm kundvagn</button> <br>"); 
  document.write("<form onsubmit='testJS(event)' method='POST' id='orderForm' style='margin-top: 5%;'>"); 
  document.write("<input type='email' id='mailInput' name='mail' placeholder='mailadress*'>"); 
  document.write("<button type='submit' id='mailB' name='mailBtn'> Beställ </button>"); 
  document.write("</form>"); 
} 
function testJS(e) { 
  alert('test'); 
  e.preventDefault(); 
}

这样修改后，testJS函数就能正确拿到事件对象，调用e.preventDefault()阻止表单默认的提交刷新行为，弹窗后页面就不会再刷新啦～

内容的提问来源于stack exchange，提问作者Svante