JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Click and Hold to select. simply click to unselect.<br /><br />
<span class='button'>Click Me</span>

CSS

.button {
    padding:4px;
    background:green;
    border-radius:4px;
    cursor:pointer;
}
.button.selected {
    background:orange;
}

JavaScript

(function () {
    // how many milliseconds is a long press?
    var offset = 3000;

    $(".button").on('mousedown', function (e) {
        // holds the start time
        $(this).data('start', new Date().getTime());
        $(this).addClass("selected");
    }).on('mouseup', function (e) {
        if (new Date().getTime() >= ($(this).data('start') + offset)) {
            //alert('ur click lasted for over 2 secs');
            $(this).addClass("selected");
        } else {
            $(this).removeClass("selected");
        }
    }).on('mouseleave', function (e) {
        start = 0;
        //you can add destroy lingering functions on mouse leave
    });
}());