javascript - 使按钮只能被点击一次异常？

Question

我使用对话框来获取用户输入，但我发现用户可能会单击双击按钮并添加两次内容，原因是对话框淡出太慢或用户单击鼠标两次..我不想要调整淡出速度，相反，如何启用按钮只能单击一次？

score 16 · Accepted Answer

jQuery 提供one()方法来注册一个只运行一次的一次性处理程序。

你可以写：

$("#yourButton").one("click", function() {
    // Add content...
});

score 9 · Accepted Answer

您可以在单击按钮后禁用该按钮以防止进一步单击：

$('button').on('click', function() {
    $(this).prop('disabled', true);
});

score 3 · Accepted Answer

这是我的建议。如果要在退出时销毁对话框，只需取消绑定单击事件

$('.my-button').on('click', function(){
    // process code
    $(this).off('click');
});

这是一个演示。第一个不允许其他点击，但第二个会。

score 1 · Accepted Answer

这是一个Plunker，它展示了如何做到这一点。您几乎需要做的就是在按钮中添加以下行：

onClick="this.disabled = true;"

这样您的按钮 HTML 将如下所示：

<button type="submit" onClick="this.disabled = true;">Submit</button>

score 1 · Accepted Answer

尝试这个：

    $('.myButton').click(function(){ 

        $(this).attr('disabled',true);

             ....
    })

score 0 · Accepted Answer

用css试试这个

$("#yourButton").one("click", function() {
     $(this).css('pointer-events', 'none');
})

6 回答 6