19808003398
/
20222670105


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<html>
<head>
  <title>Use event.firstTarget</title>
  <script src="../node_modules/hammerjs/hammer.js"></script>
  <script src="../propagating.js"></script>
  <style>
    div     {border: 1px solid black;}
    #parent {width: 600px; height: 400px; background: lightgreen;}
    #child  {width: 400px; height: 200px; background: yellow; margin: 10px;}
  </style>
</head>
<body>

<p>
  Pan the child element, and check out <code>event.target</code> and <code>event.firstTarget</code>.
</p>
<ul>
  <li id="firstTarget">First target:</li>
  <li id="target">Target:</li>
</ul>
<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, {
    preventDefault: true
  });

  var parent = document.getElementById('parent');
  var hammer1 = new Hammer(parent)
      .on('pan', function (event) {
        console.log('pan on parent', event);
      });

  var child = document.getElementById('child');
  var hammer2 = new Hammer(child)
      .on('pan', function (event) {
        console.log('pan on child', event);

        document.getElementById('firstTarget').innerHTML = 'First target: ' + event.firstTarget.id;
        document.getElementById('target').innerHTML = 'Target: ' + event.target.id;
      })
      .on('panstart', function (event) {
        console.log('panstart on child', event);
      })
      .on('panend', function (event) {
        console.log('panend on child', event);
      });
</script>
</body>
</html>