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 ...
69 lines (51 loc) • 1.29 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>
html, body {
font: 16px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 100%;
}
.drag {
display: table;
width: 200%;
height: 200%;
background: black;
color: #00ff1a;
cursor: default;
}
.drag a {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 2rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="drag">
<a href="http://google.com">Touch me...</a>
</div>
<!-- jQuery, from a global cdn -->
<script src="../libs/jquery/jquery.js"></script>
<script src="../src/jquery.finger.js"></script>
<script>
$('body').on('drag', '.drag', function(e) {
if ('vertical' == e.orientation) return;
$(this).find('p').text('tap');
e.preventDefault();
});
$('body').on('tap', 'a', function(e) {
alert(this.href);
e.preventDefault();
});
</script>
</body>
</html>