JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script>
<div>
</div>    

<br/>
<span id="dbg"></span>

CSS

</style>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style type="text/css">
div {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background: red;
}

div.pressed {
    opacity: 0.1;
}

JavaScript

var view = document.querySelector("div"),
    dbg = document.getElementById("dbg");

view.addEventListener('touchstart', function (e) {
    this.className = "pressed";
    log('touchstart');
});

view.addEventListener('touchend', function (e) {
    this.className = ""; log('touchend');
});

view.addEventListener('touchcancel', function (e) {
    this.className = ""; log('touchcancel');
});

function log(msg) {
    if (dbg.innerText.length > 40) {
        dbg.innerText = "";
    }
    dbg.innerText += '\n' + msg;    
}