Detect touch

In this example below you will see how to do a Detect touch with some HTML / CSS and Javascript

This awesome code was written by microcipcip, you can see more from this user in the personal repository.
You can find the original code on
Copyright microcipcip ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Detect touch</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <h1>Detect Touch</h1>
<p>Enable touch (for example with Chrome) to see the change in the H1 background color!</p>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
html, body {
  height: 100%;
  padding: 10px;
  background: #000000;
  color: #ffffff;

h1 {
  color: #fff;
html.-no-touch h1 {
  background: green;
html.-is-touch h1 {
  background: purple;

/*Downloaded from */
(function($) {
    'use strict';

    var $html = $('html'),
        detectTouch = function () {
            $'touchend', detectTouch);
    // just for the demo
    $html.addClass('no-js -no-touch');
    // remove the '-no-touch' class when browsing with touch
    $html.on('touchend', detectTouch);