Making UIWebview (IOS) and WebView (Android) touches look responsive

Today I found a problem that someone was having where they wanted the ability to press down on an html element with a mobile device. When the users finger is still down on the element they wanted to change a property of the element. Once the user released their finger the element should then change back to its previous state. So I decided to research a solution to this problem. This was my path.

Initial thoughts with CSS

First I thought I would take a look at the CSS pseudo property active. So I created this example.

<html>
  <body>
    <style>
      #theBox {
        width:100px;
        height:100px;
        background:black;
        opacity:1;
      }
      #theBox:active {
        opacity:0.5;
      }
    </style>
    <div id='theBox'></div>
  </body>
</html>

This did not work almost at all. So I moved on to try working with :hover. So I changed the active to hover such as below.

#theBox:hover {
	opacity:0.5;
}

Now this was interesting, when the user would press their finger down, nothing happened but when lifted the element would then make the change to an 0.5 opacity. Then it would stay like that until you selected something else on the page.

After these test I knew I would have to resort to JavaScript.

Initial thoughts with JavaScript

My first though was to attempt doing the following code using the mouse down and mouse up events. Making an example like so.

<html>
  <body>
    <style>
      #theBox {
        width:100px;
        height:100px;
        background:black;
        opacity:1;
      }
      #theBox:active {
        opacity:0.5;
      }
    </style>
    <script>
      $('#theBox').mousedown(function() {
        $('#theBox').css('opacity', '0.5');
      });
      $('#theBox').mouseup(function() {
        $('#theBox').css('opacity', '1.0');
      });
    </script>
    <div id='theBox'></div>
  </body>
</html>

Again this was to no avail. While it may have seemed like that was what I needed. It was not. After researching more I finally found the solution.

The answer to the problem

So after researching more I found out about these things called 'touchstart' and 'touchend' which are events that can be listened for by the element so that when the element is touched and the finger is down the 'touchstart' event is thrown and when the finger is lifted from the element the 'touchend' event is thrown. So with my new found knowledge I coded this.

<html>
  <body>
    <style>
      #theBox {
        width:100px;
        height:100px;
        background:black;
        opacity:1;
      }
      #theBox:active {
        opacity:0.5;
      }
    </style>
    <script>
      document.getElementById('theBox').addEventListener('touchstart', function () {
        $('#theBox').css('opacity', '0.5');
      });
      document.getElementById('theBox').addEventListener('touchend', function () {
        $('#theBox').css('opacity', '1.0');
      });
    </script>
    <div id='theBox'></div>
  </body>
</html>

And what do you know that worked like a charm!. Here is a JSFiddle you can try.

So there you have it ladies and gentlement. When looking to catch when a finger is down on an element and react to it use 'touchstart' and when the finger is lifted use 'touchend'. Until next time happy coding!