mousedown+mousemove with iframe

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>

  <style>
    html, body {
      width: 100%;
    }

    iframe {
      display: block;
      width:   350px;
      height:  480px;
      margin:  0 auto;
      border: dashed 2px #000;
    }
    
    .code {
      font-family:   monospace;
      border-radius: 3px;
      background:    rgba(0, 0, 0, .2);
      padding:       3px;
      font-size:     14px;
    }
  </style>

</head>
<body>
<p>Below is an iframe (marked with dashed border) with mouse events listening on it's <span class="code">window</span>.</p>
<ol>
  <li><strong>Click</strong> the coloured element inside the iframe</li>
  <li><strong>Drag</strong> pointer outside the iframe area</li>
  <li>Once outside the iframe, continue to hold mouse down and keep moving:
    <ul>
      <li>In Chrome, the <span class="code">mousemove</span> events will continue to fire.</li>
      <li>In IE11 they do not.</li>
    </ul>
  </li>
</ol>
<!--<iframe src="hammer-iframe-inside.html" width="1080" height="720"></iframe>-->
<iframe src="iframe.html" width="1080" height="720"></iframe>


</body>
</html>

// Code goes here

/* Styles go here */

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>HammerJS iframe test</title>

  <style>
    #hammerElement {
      background: teal;
    }

    #genericElement {
      background: crimson;
    }

    .touch-me {
      width:               80%;
      height:              220px;
      text-align:          center;
      font:                10px Helvetica, Arial, sans-serif;
      overflow:            hidden;

      /* content-zooming */
      -ms-content-zooming: none;

      /* user-select */
      -webkit-user-select: none;
      -moz-user-select:    none;
      -ms-user-select:     none;
      user-select:         none;

      /* user-drag */
      -webkit-user-drag:   none;

      /* touch-select */
      -ms-touch-select:    none;

      /* touch-action */
      touch-action:        pan-y;
    }
  </style>
</head>
<body>
<span class="msgChild"></span>

<div id="genericElement" class="touch-me"></div>

<!--<script src="../../bower_components/hammerjs/hammer.js"></script>-->
<script>

  var genericElement = document.querySelector( '#genericElement' ),
      myWin          = genericElement.ownerDocument.defaultView,
      myWin2         = genericElement.ownerDocument.defaultView.parent.document;

  function genericHandler( ev )
  {
//    console.log( ev );
    genericElement.innerHTML = ev.type + ' ' + ev.timeStamp + " event detected." /*+ ev.currentTarget.location.pathname*/ + "<br>" + genericElement.innerHTML;
  }
  
  myWin.addEventListener( 'mousemove', genericHandler );
  myWin.addEventListener( 'mousedown', genericHandler );
  myWin.addEventListener( 'mouseup', genericHandler );
  myWin.addEventListener( 'click', genericHandler );
  

  //////


  //  document.querySelector( '.msgChild' ).innerHTML = document.querySelector( '#hammerElement' ).ownerDocument.defaultView.location.pathname;
  document.querySelector( '.msgChild' ).innerHTML = top.location.pathname;
</script>
</body>
</html>