propagating-hammerjs
Version:
Extend hammer.js with event propagation
43 lines (38 loc) • 1.02 kB
HTML
<html>
<head>
<title>Basic usage</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>
var parent = document.getElementById('parent');
var hammer1 = propagating(new Hammer(parent))
.on('tap', function (event) {
alert('tap on parent');
});
var child = document.getElementById('child');
var hammer2 = propagating(new Hammer(child))
.on('tap', function (event) {
alert('tap on child');
// stop propagation from child to parent
event.stopPropagation();
});
</script>
</body>
</html>