CODEWITHSUNDEEP
javascriptjquery
jichae
jichae

Reputation: 21

Can JavaScript help prevent duplicate click event handling?

I want the call function to run every 1.5 seconds. However, if you are clicking continuously on a mobile machine From the moment the call function is called in succession.

This is the code I am using:

$('#sendVideo').unbind('click');
$('#sendVideo').bind('click', function (event) {
    $("#sendVideo").prop("disabled", true);
    call();
    setTimeout("$('#sendVideo').prop('disabled', false);", 1500);
});

Is there a solution for this?

Upvotes: 2

Views: 2143

Answers (2)

Siddharth Tyagi
Siddharth Tyagi

Reputation: 415

You can set a flag on the element during the capture phase and delete it during bubble phase. I am not sure about jQuery but in simple java-script you can achieve it like this:

// set the flag on at capture
document.querySelector("#sendVideo").addEventListener('click', function(e) {
    if (this.flagOn) {
        e.preventDefault();
        return false;
    }
    this.flagOn = true;
    return true;
}, true);
// delete on bubble
document.querySelector("#sendVideo").addEventListener('click', function(e) {
    delete this.flagOn;
}, false);

This should handle that for you without any modification in your own code.

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16577

You can use a clever hack:

var clickInProgress = false;
$('#sendVideo').bind('click', function (event) {
    if(clickInProgress) return;
    clickInProgress = true;
    $("#sendVideo").prop("disabled", true);
    call();
    setTimeout("$('#sendVideo').prop('disabled', false); clickInProgress=false;", 1500);
});

Upvotes: 3

Related Questions