window.matchMedia('print') 判断点击 打印按钮 还是 点击 取消按钮

对于这个问题，window.matchMedia('print') 返回一个MediaQueryList对象，它表示当前文档是否匹配指定的CSS媒体查询（在这个例子中是'print'）。如果返回的对象的matches属性为true，则表示当前文档匹配该媒体查询，也就是用户点击了打印按钮，否则用户点击了取消按钮。因此，你可以通过以下代码来判断用户点击了哪个按钮：

// 获取打印按钮和取消按钮
const printBtn = document.getElementById('printBtn');
const cancelBtn = document.getElementById('cancelBtn');

// 监听按钮点击事件
printBtn.addEventListener('click', () => {
  // 判断是否匹配'print'媒体查询
  if (window.matchMedia('print').matches) {
    console.log('用户点击了打印按钮');
  }
});

cancelBtn.addEventListener('click', () => {
  // 判断是否匹配'print'媒体查询
  if (!window.matchMedia('print').matches) {
    console.log('用户点击了取消按钮');
  }
});

相关问题

获取window.print()打印二维码图片怎么监听打印是否打印

可以通过监听`window`对象的`beforeprint`和`afterprint`事件来获取打印事件的状态。`beforeprint`事件在打印对话框弹出之前触发，`afterprint`事件在打印对话框关闭之后触发。你可以在这两个事件的监听函数中对打印状态进行处理。

以下是一个示例代码：

window.addEventListener('beforeprint', function() {
  // 打印对话框弹出之前的处理逻辑
});

window.addEventListener('afterprint', function() {
  // 打印对话框关闭之后的处理逻辑
});

在打印对话框关闭之后，可以通过检查打印状态来确定是否已经打印。如果用户已经点击了打印按钮，则打印状态应该为`true`；否则，打印状态应为`false`。

window.addEventListener('afterprint', function() {
  if (window.matchMedia('print').matches) {
    console.log('已打印');
  } else {
    console.log('未打印');
  }
});

注意：`matchMedia()`方法用于检查打印状态的代码只能在`afterprint`事件的回调函数中执行，因为只有在打印对话框关闭之后才会有打印状态。

afterprint 设置点击取消不触发

如果您想在用户单击打印对话框中的取消按钮时不触发事件，可以使用以下代码：

window.onafterprint = function () {
  // 在打印后执行的代码
};

window.onbeforeprint = function () {
  // 在打印前执行的代码
};

// 取消按钮被点击时不触发事件
window.matchMedia('print').addListener(function (media) {
  if (!media.matches) {
    // 取消按钮被点击，不执行 onafterprint 事件
    window.onafterprint = null;
  } else {
    // 恢复 onafterprint 事件
    window.onafterprint = function () {
      // 在打印后执行的代码
    };
  }
});

在这里，我们使用了 `matchMedia` 方法来检测打印对话框的状态，并在取消按钮被点击时将 `onafterprint` 事件设置为 `null`，以防止它被触发。当打印对话框被打开或重新加载时，我们重新设置 `onafterprint` 事件。