Chrome 63中如何捕获菜单触发的打印事件？已实现Ctrl+P捕获

这个情况我太熟悉了！之前也踩过同样的坑——Chrome里通过快捷键Ctrl+P触发打印能被键盘事件监听到，但通过浏览器菜单、右键菜单发起的打印，根本不会触发键盘事件，因为这是浏览器直接调用打印功能，走的不是按键事件流程。不过别担心，有专门的浏览器事件能搞定这个需求！

你可以使用beforeprint和afterprint这两个事件，它们会在打印动作触发时（不管是哪种触发方式）被调用：

具体实现代码 #

原生JavaScript写法 #

// 打印前触发
window.addEventListener('beforeprint', function() {
  console.log('打印即将开始，执行你的逻辑');
  // 把你之前在Ctrl+P事件里的处理代码放到这里
});

// 打印后触发（对话框关闭后）
window.addEventListener('afterprint', function() {
  console.log('打印已完成/取消，执行后续逻辑');
});

jQuery写法 #

$(window).on('beforeprint', function() {
  console.log('打印即将开始');
  // 你的处理逻辑
});

$(window).on('afterprint', function() {
  console.log('打印结束');
});

补充说明 #

• 这两个事件在你使用的Chrome 63.0.3239.132版本中是完全支持的，放心用就行。
• beforeprint会在打印对话框弹出之前触发，不管是快捷键、菜单还是右键触发的打印，都会触发这个事件，刚好覆盖你需要的场景。
• 如果非要区分是键盘触发还是菜单触发，可以在Ctrl+P的按键监听里设置一个临时标记，然后在beforeprint事件里检查这个标记，处理完后重置标记——不过大多数场景下其实不需要这么做。

内容的提问来源于stack exchange，提问作者Mike in Coloma