hammerjs
Version:
A javascript library for multi-touch gestures
92 lines (74 loc) • 3.03 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="assets/style.css">
<title>Hammer.js</title>
<style>
.tester {
margin: 20px 0;
padding: 10px;
height: 200px;
overflow: hidden;
}
.scroll-space {
height: 9000px;
}
#native, #no-native {
color: #fff;
font-weight: bold;
font-size: 1.1em;
padding: 10px 20px;
display: none;
margin: 25px 0;
}
.show {
display: block ;
}
</style>
</head>
<body>
<div class="container">
<p>Hammer provides a <a href="../../src/touchaction.js">kind of polyfill</a>
for the browsers that don't support the <a href="http://www.w3.org/TR/pointerevents/#the-touch-action-css-property">touch-action</a> property.</p>
<div id="native" class="green">Your browser has support for the touch-action property!</div>
<div id="no-native" class="red">Your browser doesn't support the touch-action property,
so we use the polyfill.</div>
<h2>touch-action: auto</h2>
<p>Should prevent nothing.</p>
<div class="tester azure" id="auto"></div>
<h2>touch-action: pan-y</h2>
<p>Should prevent scrolling on horizontal movement. This is set by default when creating a Hammer instance.</p>
<div class="tester azure" id="pan-y"></div>
<h2>touch-action: pan-x</h2>
<p>Should prevent scrolling on vertical movement.</p>
<div class="tester azure" id="pan-x"></div>
<h2>touch-action: pan-x pan-y</h2>
<p>Should <strong>not</strong> prevent any scrolling on any movement. Horizontal and vertical scrolling handled by the browser directly.</p>
<div class="tester azure" id="pan-x-pan-y"></div>
<h2>touch-action: none</h2>
<p>Should prevent all.</p>
<div class="tester azure" id="none"></div>
</div>
<script src="../../hammer.js"></script>
<script>
var support = Hammer.prefixed(document.body.style, 'touchAction');
document.getElementById(support ? 'native' : 'no-native').className += ' show';
var touchActions = ['auto', 'pan-y', 'pan-x', 'pan-x pan-y', 'none'];
Hammer.each(touchActions, function(touchAction) {
var el = document.getElementById(touchAction.replace(" ", "-"));
var mc = Hammer(el, {
touchAction: touchAction
});
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.get('pinch').set({ enable: true });
mc.get('rotate').set({ enable: true });
mc.on("pan swipe rotate pinch tap doubletap press", function(ev) {
el.textContent = ev.type +" "+ el.textContent;
});
});
</script>
<div class="scroll-space"></div>
<p>hi.</p>
</body>
</html>