jquery.finger
Version:
jQuery Finger unifies click and touch events by removing the 300ms delay on touch devices. It also provide a common set of events to handle basic gestures such as drag and pinch. Small (< 1kb gzipped), it is focused on performance, is well tested and ...
75 lines (57 loc) • 1.66 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jQuery Finger</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
body {
font: 16px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.touchme {
display: table;
width: 320px;
height: 180px;
background: black;
color: #00ff1a;
cursor: default;
}
.touchme p {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 2rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="touchme">
<p>Touch me...</p>
</div>
<div class="touchme">
<p>Touch me...</p>
</div>
<!-- jQuery, from a global cdn -->
<script src="../libs/jquery-loader.js"></script>
<script src="../src/jquery.finger.js"></script>
<script>
// $('body').on('tap', '.touchme', function() {
// $(this).find('p').text('tap');
// });
//
// $('body').on('tap', '.touchme', function() {
// $(this).find('p').css('background', 'green');
// });
$('.touchme').on('tap', function() {
$(this).find('p').css('background', 'red');
});
$('body').on('tap', '.touchme', function() {
$(this).find('p').text('tap');
});
</script>
</body>
</html>