Build a Mouse Click Input or Touch Tester in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Mouse Click Input or Touch Tester in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a mouse click input or touch tester in browser using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<style>
  body {
  text-align:center;
  font-family:georgia, serif;
  width:500px;
  margin:auto;
  -ms-content-zooming:none;
  -ms-touch-action:none;
}

h1 {
  font-weight:normal;
}

.box {
  display:inline-block;
  margin:5px;
}

.caption {
  font-size:12px;
}

.content {
  width:100px;
  height:100px;
  background:black;
}

.selected,
.hover:hover,
.active:active { background:green; }
</style>
<h1>Mouse/Touch Input Test</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  // Test boxes

box('click').on('click', toggle);
box('dblclick').on('dblclick', toggle);
box(':hover').addClass('hover');
box(':active').addClass('active');
box('contextmenu').on('contextmenu', toggle);
box('mouseenter').on('mouseenter', set).on('mouseleave', reset);
box('mouseover').on('mouseover', set).on('mouseout', reset);
box('mousemove').on('mousemove', set).on('mouseout', reset);
box('mousedown').on('mousedown', set).on('mouseup', reset);
box('touchstart').on('touchstart', set).on('touchend', reset);
box('touchmove').on('touchmove', set).on('touchend', reset);
box('MSPointerDown').on('MSPointerDown', set).on('MSPointerUp', reset);
box('MSPointerOver').on('MSPointerOver', set).on('MSPointerOut', reset);
box('MSPointerMove').on('MSPointerMove', set).on('MSPointerOut', reset);
box('MSPointerHover').on('MSPointerHover', set).on('MSPointerOut', reset);

if (window.navigator.msPointerEnabled) {
  box('Combined')
    .on('MSPointerDown', set)
    .on('MSPointerUp', reset);
} else {
  box('Combined')
    .on('touchstart', function(e) { e.preventDefault(); set(); })
    .on('touchend', function(e) { e.preventDefault(); reset(); })
    .on('mousedown', set)
    .on('mouseup', reset)
}

// Functions

function set(e) { $(this).addClass('selected'); }
function reset() { $(this).removeClass('selected'); }
function toggle() { $(this).toggleClass('selected'); };

function box(caption) {
  return $('<div class="box"><div class="content"></div><div class="caption">' + caption + '</div></div>').appendTo('body').find('.content');
}

// https://www.html5rocks.com/en/mobile/touchandmouse/
// https://www.html5rocks.com/en/tutorials/casestudies/buildwithchrome/#touch-support
// https://github.com/Polymer/PointerEvents
// http://blogs.msdn.com/b/eternalcoding/archive/2013/01/16/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser.aspx
</script>

 

See also  Build a Fancy or Stylish Text Generator With Emoji's & Fonts For Instagram Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply