javascript - ボタンが5秒間クリックされないようにする方法

Question

私は次のようなものを持っています：

<button id="button" onclick="alert('Hi')">a button</button>

ボタンのクリックアクションを無効にし たいのですが、たとえば、ページが読み込まれてから5秒間です。
注：ボタンを無効にしたくはありません。onclickアクションが5秒まで機能しないようにしたいだけです。

Answer 1

jQueryを使用して、5秒のタイムアウト後にイベントをバインドします。

setTimeout(function(){
    $('#button').click(function(){
        alert('Hi');
    });
}, 5000);

Answer 2

onclick属性を削除して、5秒後に元に戻すだけです。

var onClickFunc = $('#button').prop('onclick');
$('#button').removeProp('onclick');
setTimeout(function(){
    $('#button').click(onClickFunc);
}, 5000);

デモ：http：//jsfiddle.net/KX5g7/1/

Answer 3

$(function(){
        $('#button').unbind('click');
        setTimeout(function(){
            $('#button').bind('click');
        }, 5000);
    });​

---

編集：

Rocketが言ったように、これはイベントのバインドを解除しないようです。したがって、イベントを発生させる属性を削除するのが良い解決策になると思います。

$(function(){
    $('#button').attr('onclick', '');
    setTimeout(function(){
        $('#button').attr('onclick', 'alert("Hi")');
    }, 5000);
});​

Answer 4

$(function(){
    $('#button').attr('savedclick', $('#button').attr('onclick')).removeAttr('onclick');  
    setTimeout(enableButton, 5000);    
});

function enableButton(){
    $('#button').attr('onclick', $('#button').attr('savedclick')).removeAttr('savedclick');
}

<ahref = "http://jsfiddle.net/Yupt9/1/" rel ="nofollownoreferrer">デモ

Answer 5

onclickそのためには、インラインに入れないでください。

$(document).ready(...)関数で、コールバック関数を使用してsetTimeout5秒間待機し、onclick（$('#button').click(function(btn) { alert('Hi'); });）を設定します。