单选按钮change触发表单提交阻止页面刷新在Firefox不生效问题

问题原因 #

Firefox 抛出 Form submission via untrusted submit event is deprecated 警告，是因为脚本主动派发的 submit 事件被判定为非用户触发的不可信事件，这类事件触发的表单提交逻辑已被 Firefox 拦截，因此你绑定的 submit 回调不会执行。

解决方案1：直接调用业务逻辑（最简洁，推荐） #

你本身就会阻止表单默认刷新，不需要绕表单提交事件流程，直接把业务逻辑抽离后在单选框的 change 事件中调用即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="form">
        <input type="radio" name="radio" id="radio1" onchange="submitExercise()">
        <input type="radio" name="radio" id="radio2" onchange="submitExercise()">
        <input type="radio" name="radio" id="radio3" onchange="submitExercise()">
    </form>
    <script>
        function submitExercise() {
            const form = document.querySelector('#form');
            // 此处写你的自定义业务逻辑
            console.log("test");
        }
    </script>
</body>
</html>

解决方案2：保留submit事件触发流程 #

如果你的场景需要统一触发表单绑定的所有submit监听器，可以通过模拟点击隐藏的提交按钮来触发可信的submit事件，兼容所有浏览器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="form">
        <input type="radio" name="radio" id="radio1" onchange="this.form.submitBtn.click()">
        <input type="radio" name="radio" id="radio2" onchange="this.form.submitBtn.click()">
        <input type="radio" name="radio" id="radio3" onchange="this.form.submitBtn.click()">
        <!-- 隐藏的提交按钮，用于触发可信submit事件 -->
        <button type="submit" name="submitBtn" style="display:none;"></button>
    </form>
    <script>
        document.querySelector("#form").addEventListener("submit", submitExercise);
        function submitExercise(event) {
            event.preventDefault();
            console.log("test");
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sam Van Battel