title: Detecting browser print event happens two different ways in Chrome
body: <p>I am currently using the most up-to-date version of Chrome (43.0.2357.130), and am experiencing a difference in printing functionality when calling print from <code>window.print()</code> vs using ⌘P.</p>
  
  <p>When printing using <code>window.print()</code> it outputs to the console correctly. It outputs <code>Before Print</code> when the print dialog is opened, and <code>After Print</code> when the dialog is closed.</p>
  
  <p>However, when using the Chrome menu, or ⌘P to print, it logs both <code>Before Print</code>, and <code>After Print</code> to the console when the print dialog opens.</p>
  
  <p>Here is the code I am using, which works well in other browsers.</p>
  
  <pre><code>function beforePrint() {
      console.log('Before Print');
  }
  
  function afterPrint() {
      console.log('After Print');
  }
  
  if (window.matchMedia) {
      var mediaQueryList = window.matchMedia('print');
      mediaQueryList.addListener(function (mql) {
          (mql.matches) ? beforePrint() : afterPrint();
      });
  }
  else {
      // basically a fallback for &lt; IE11
      window.addEventListener('beforeprint', beforePrint, false);
      window.addEventListener('afterprint', afterPrint, false);
  }
  </code></pre>
  
  <p>Once again for clarity as if this was the console:</p>
  
  <p>This is the output I expect:</p>
  
  <pre><code>&gt; window.print()
    Before Print
    // Print Dialog is now open, I press cancel to close dialog
    After Print
  </code></pre>
  
  <p>This is the output I get when I use ⌘P or the menu to start print:</p>
  
  <pre><code>  Before Print
    After Print
    // Print Dialog is now open, but it is occurring in the wrong place
  </code></pre>
  
  <p>Is this a bug in Chrome, or is there another way to capture the event correctly?</p>
  
  <p>Just for reference, here is the <a href="http://caniuse.com/#feat=matchmedia" rel="nofollow">Can I Use support table</a> for <code>matchMedia</code></p>