How to disable double-click on an element using Jquery?

While searching the internet for the solution to this problem, there were many solutions with different approaches. I tried many of them, but the best one to fulfill my need is below.

Jquery Function

jQuery.fn.trackClicks = function () {
    if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);

    var timer;
    $(this).click(function () {
        $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);

        if (timer) clearTimeout(timer);

        var item = $(this);
        timer = setTimeout(function() {
            item.attr("data-clicks", 0);
        }, 300);
    });
}

Implementation:

$(function () {
    $("a").trackClicks();

    $("a").click(function () {
        if ($(this).attr("data-clicks") === "2") {
            // Double clicked
        }
    });
});

I found this solution on this link.

https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately

Here, I have changed the timer to 300 which was best suited for me.

Hope this helps you as well.

Related