19808003398
/
20222670105


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243
							<!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>