43 lines
1005 B
HTML
43 lines
1005 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Basic usage</title>
|
||
|
|
<script src="../node_modules/hammerjs/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>
|