移动端表单提交时event.preventDefault()失效问题求助

问题描述 #

表单提交时调用event.preventDefault()，桌面设备能正常阻止默认提交行为，但移动设备上表单仍会触发提交，事件阻止失效。

当前代码 #

index.html #

<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<form id="myForm">
   <input id="name">
   <button type="submit">
</form>
</body>
<script src="script.js"></script>

script.js #

$(function() {
    $("#myForm").submit(function (event) {
        event.preventDefault();
        let formData = $("#name").val();
        console.log(formData);
});

排查与解决方案 #

1. 修复HTML语法错误 #

你的按钮标签未闭合（<button type="submit">缺少</button>），移动端浏览器对HTML语法容错性更低，这种错误可能导致事件处理逻辑异常。

修正后的按钮代码：

<button type="submit">提交</button>

2. 强化事件阻止逻辑 #

若修复语法后问题仍存在，可在事件处理中同时添加event.stopPropagation()，或直接返回false（jQuery中return false等价于同时调用preventDefault()和stopPropagation()）：

修改后的script.js：

$(function() {
    $("#myForm").submit(function (event) {
        event.preventDefault();
        event.stopPropagation();
        let formData = $("#name").val();
        console.log(formData);
        // 也可以直接用 return false 替代上面两行
        // return false;
    });
});

3. 改用事件委托绑定 #

部分移动端浏览器存在DOM解析延迟，使用事件委托绑定能提升兼容性：

$(document).on('submit', '#myForm', function(event) {
    event.preventDefault();
    let formData = $("#name").val();
    console.log(formData);
});

4. 屏蔽触摸事件干扰 #

移动端触摸事件（如touchstart）可能和点击事件冲突，导致表单意外提交，可给按钮添加触摸事件阻止：

$(function() {
    $("#myForm button[type='submit']").on('touchstart', function(event) {
        event.preventDefault();
    });
    
    $("#myForm").submit(function (event) {
        event.preventDefault();
        let formData = $("#name").val();
        console.log(formData);
    });
});

总结 #

优先修复HTML语法错误，这是移动端兼容性问题的常见触发点；再逐步尝试强化事件阻止逻辑或调整绑定方式，基本能解决preventDefault()在移动端失效的问题。

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