propagating-hammerjs
Version:
Extend hammer.js with event propagation
47 lines (41 loc) • 1.19 kB
HTML
<html>
<head>
<title>Replace global hammer.js constructor</title>
<script src="../node_modules/@egjs/hammerjs/dist/hammer.js"></script>
<script src="../propagating.js"></script>
<style>
div {border: 1px solid black;}
#parent {width: 400px; height: 400px; background: lightgreen;}
#child {width: 200px; height: 200px; background: yellow; margin: 10px;}
</style>
</head>
<body>
<p>
Tap on child or parent. The child will stop propagation of the event.
</p>
<div id="parent">
parent
<div id="child">
child
</div>
</div>
<script>
// replace the global Hammer constructor with a propagated one, such that
// hammer.js instances automatically have event propagation.
Hammer = propagating(Hammer);
var parent = document.getElementById('parent');
var hammer1 = new Hammer(parent)
.on('tap', function (event) {
alert('tap on parent');
});
var child = document.getElementById('child');
var hammer2 = new Hammer(child)
.on('tap', function (event) {
alert('tap on child');
// stop propagation from child to parent
event.stopPropagation();
});
</script>
</body>
</html>