JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<a id="single" href="http://www.google.com/" target="_blank">Click me!</a>
<a id="double" href="http://www.bing.com/" target="_blank">Double-click me!</a>
<a id="triple" href="http://www.yahoo.com/" target="_blank">Triple-click me!</a>

CSS

a {
    padding: 3em;
    display: block;
}

JavaScript

$('a').click(function(e) {
    var link = $(this);
    
    switch (link.attr('id')) {
        case "double":
            if (link.hasClass('click')) {
                break;        
            }
            else {
                firstClick(e,link);
                break;
            }
        case "triple":
            if (link.hasClass('double-click')) {
                break;
            }
            else if (link.hasClass('click')) {
                doubleClick(e,link);
                break;
            }
            else {
                firstClick(e,link);
                break;
            }
        default:
            break;
    }
});
        
function firstClick(event,link) {
    event.preventDefault();
    link.addClass('click');
    checkClick(link);
}
function doubleClick(event,link) {
    event.preventDefault();
    link.addClass('double-click');
    checkDoubleClick(link);
}
function checkClick(link) {
    window.setTimeout(function() {
        link.removeClass('click');
    },400);
}
function checkDoubleClick(link) {
    window.setTimeout(function() {
        link.removeClass('double-click');
    },400);
}