JSFiddle - React, Tailwind, and code Playground

by ianb

HTML

<button class="click_and_hold">
</button>
<div id="counter">0</div>

CSS

.click_and_hold{
    display: inline-block;
    width:100px;
    height:100px;
    background-image: url(http://www.kupio.com/image-dump/button-test.png);
    border:0;
    cursor:pointer;
}
.click_and_hold:hover {
    background-position: 100px 0px;
}
.click_and_hold:active {
    background-position: 0px 0px;
}

JavaScript

var currentAdjustment = null;
var val = 0;

var beginAdjust = function(amount) {
    currentAdjustment = amount;
    setTimeout(checkAdjust, 100);
};

var checkAdjust = function() {
    if (currentAdjustment !== null) {
        makeAdjustment(currentAdjustment);
        setTimeout(checkAdjust, 100);
    }
};

var makeAdjustment = function(amt) {
    val += amt;
    $('#counter').text(val);
};

$('.click_and_hold').bind("mousedown touchstart", function(e) {
    beginAdjust(10);
}).bind("mouseleave mouseup touchend", function() {
    currentAdjustment = null;
}).click(function(e) {
    makeAdjustment(10);
});