在 Chrome/Safari 中提交两次表单

Answer 1

这个问题实际上与 Facebox 有关（http://defunkt.github.com/facebox/）。 Facebox 初始化会在页面加载后引发第二组请求。因此，如果您发布到

/myaction/create

，Facebox 将启动第二组请求，并将基本 URL 设置为

/myaction/create

。解决方法是在发布后重定向到处理 get 请求的 URL，这样您就不会执行两次发布。非常感谢您的帮助。

Answer 2

我不是100%确定，但请尝试这个：

<script type="text/javascript">
   $(document).ready(function() {
      $("#create-deck-form").submit(function(event){
         if(!$("#deck-name-field").val().length) {
           return false;
         }
       });
   });
</script>

如果这不起作用，请看看

for(e in $("#create-deck-form").data('events'))
    alert(e);

这将提醒您所有与您的

form

相关的事件。也许还有更多的事件处理程序？否则也警报/日志

$("#create-deck-form").attr('onclick')

和

$("#create-deck-form").attr('onsubmit')

以防万一。

Answer 3

您可以在收到警报后尝试

return false;

并删除

event.preventDefault();

。也许您还需要在 else 子句中使用

return true;

。我相信我在某个地方有这样的工作。

Answer 4

好吧，不确定这会有多大帮助，但尝试删除提交输入并通过 JavaScript 提交表单。例如

<input id="submit-button" class="add-button" type="button" value="Create" />

那么你可以尝试一下，而不是听 onsubmit

$('#submit-button').click(function(evt) {
    if(validationSuccess(...)) {
        $("#create-deck-form").submit();
    } else {
        //display whatever
    }
});

现在你的方法也应该可以工作......但是这样你就可以调试你的问题所在......这应该只提交一次......祝你好运！

Answer 5

浏览器（例如 Safari 桌面版）将表单提交事件屏蔽为点击事件。因此，即使您在表单的提交事件上设置了 evt.preventDefault() 或 evt.stopPropagation()，您也可能会遇到提交表单的问题。

一个很好的例子和场景是通过按 ENTER 键提交表单。在这种情况下，Safari 会发出一个点击事件，可能会导致其他事件侦听器触发等。

解决方案：

您可以像这样监听那些屏蔽的提交事件：

$('[type="submit"]', $('form')).on('click', function(evt) {
    ...
}

现在你只想捕获那些实际上被屏蔽的事件；您不想捕获提交按钮上的鼠标点击。

因此你必须区分真正的点击和那些流氓点击。您可以通过检查 evt.originalEvent 对象来做到这一点。

如果你能找到一个pointerId（Chrome）键，那么恶意点击就会带有pointerId = -1（某个负值）；如果您没有pointerId（例如Safari），您可以查找evt.originalEvent.detail键（Safari），如果出现恶意点击，该键的值为0（零）。

完整示例

$('[type="submit"]', $('form')).on('click', function(evt) {
    let do_not_submit = false
    // chrome
    if (typeof evt.originalEvent.pointerId !== 'undefined' && evt.originalEvent.pointerId < 0) {
        do_not_submit = true
    }
    // safari
    if (!do_not_submit && typeof evt.originalEvent.detail !== 'undefined' && evt.originalEvent.detail === 0) {
        do_not_submit = true
    }
    if (do_not_submit) {
        evt.preventDefault()
        evt.stopPropagation()
        return
    }
    // no worries ... 
    // submitting ...
}