Tappable demo

https://github.com/cheeaun/tappable

by cheeaun

HTML

<script src="https://raw.github.com/cheeaun/tappable/master/source/tappable.js"></script>
<h1>Tappable demo</h1>
<a id="a" href="#">Tap me</a>
<a id="b" href="#">Tap me (noScroll)</a>
<a id="c" href="#">Tap me (noScroll &amp; noScrollDelay = 100)</a>
<a id="d" href="#">Tap me (activeClassDelay = 100 &amp; inactiveClassDelay = 100)</a>
<a id="e" href="#">Tap me (noScroll &amp; activeClassDelay = 100 &amp; inactiveClassDelay = 100)</a>
<a id="f" href="#">Tap me (noScroll &amp; noScrollDelay = 100 &amp; activeClassDelay = 100 &amp; inactiveClassDelay = 100)</a>

CSS

*{
    -webkit-text-size-adjust: none;
    font-family: sans-serif;
}
html, body{
    min-height: 150%;
}
a{
    border: 2px solid #aaa;
    display: inline-block;
    width: 120px;
    height: 120px;
    margin: 10px 10px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 12px;
}
a.tappable-active{
    color: #fff;
    background-color: red;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

JavaScript

tappable('#a', function(){
    alert('tap');
});
tappable('#b', {
    noScroll: true,
    onTap: function(){
        alert('tap');
    }
});
tappable('#c', {
    noScroll: true,
    noScrollDelay: 100,
    onTap: function(){
        alert('tap');
    }
});
tappable('#d', {
    activeClassDelay: 100,
    inactiveClassDelay: 100,
    onTap: function(){
        alert('tap');
    }
});
tappable('#e', {
    noScroll: true,
    activeClassDelay: 100,
    inactiveClassDelay: 100,
    onTap: function(){
        alert('tap');
    }
});
tappable('#f', {
    noScroll: true,
    noScrollDelay: 100,
    activeClassDelay: 100,
    inactiveClassDelay: 100,
    onTap: function(){
        alert('tap');
    }
});