Bacon / Hammer.js example

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.6.19/Bacon.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<div id="hammer">
    touch this
</div>

CSS

#hammer {
    margin: 50px;
    width: 150px;
    height: 150px;
    background: green;
    font-family: arial;
    color: white;
    padding-top: 110px;
    text-align: center;
    transition: background 1s;
}
#hammer.tapped {
    background: yellow;
}

JavaScript

$(function(){
    var box = document.getElementById("hammer");
    
    var tap = hammerStream(box, "tap")
    
    tap.take(2).onValue(function() {
        $(box).addClass("tapped")
    })
    
    tap.delay(500).onValue(function() {
        $(box).removeClass("tapped")
    })
    
    tap.skip(2).take(1).onValue(function() {
        $(box).text("can't touch this")
    })    
})

function hammerStream(element, event) {
    return Bacon.fromBinder(function(sink) {
        function push() {
            sink("hammer time!")
        }
        Hammer(element).on(event, push)
        return function() {
            Hammer(element).off(event, push)
        }
    })
}