Double Tap With On

by gkohen

HTML

<script src="https://raw.github.com/benmajor/jQuery-Mobile-Events/master/src/jquery.mobile-events.js"></script>
<div class='unselectable' id="main">
  <div class='unselectable' id="tapButton">Tapper</div>
</div>

CSS

#tapButton {
  padding: 20px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ff00ff;
  float: left;
  margin: 20px;
}
.my {
  padding: 20px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f0f0ff;
  float: left;
  margin: 20px;
}

.unselectable
{
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}

JavaScript

$(document).ready(function () {

  $('#main').on('singletap', 'div', function (event) {
    event.preventDefault();
    alert('You Tapped Me');
  });
  $('#main').on('doubletap', 'div', function (event) {
    event.preventDefault();
    alert('You Double Tapped Me');
  });
  $('#main').append('<div class="my" class="unselectable" >MyTapper</div>');
});