jquery - 如何在 Chrome 中的按钮上添加点击处理程序并且仍然具有默认操作

Question

以下在 Firefox 中有效：

$('input[type="submit"]').on('click', ->
  $(this).addClass('disabled').attr('disabled', 'disabled')
  $(this).val('Sending')
)

这个想法是为了防止双击（上面还有其他问题，但不是这个问题的主题）。然而，在 Chrome 中，表单永远不会被提交。click 事件防止发生默认操作（提交表单）！

我可以在最后做类似的事情form.submit()，但是在 Firefox 中它会提交两次？我想我必须这样做e.preventDefault()......这里有一个简单的解决方案吗？我应该改为监听表单提交事件吗？

Answer 1

最干净的方法是

--> 将事件附加到按钮

--> 防止默认动作

--> 提交表格

这应该适用于两种浏览器。你走在正确的道路上。

$('input[type="submit"]').on('click', function(e) {
  e.preventDefault();
  $(this).addClass('disabled').attr('disabled', 'disabled')
  $(this).val('Sending')
  form.submit()
});

Answer 2

我知道 2 种方法（看这个小提琴）来设置事件处理程序并且仍然有默认操作

1.- 使用 javascript：

var btn = document.getElementById("btn1"); 

btn.addEventListener && btn.addEventListener("click", FunctionName, false) ||
btn.attachEvent && btn.attachEvent("onclick", FunctionName);

2.-使用 jquery：

$("#btn1").click(function(event){
    //do something
    if(!Valid)
    {
        //prevent default action()
        event.preventDefault();
    }
});  

Answer 3

$('input[type="submit"]').one('click', function() { setTimeout(function(){ return false; }, 20); });