网页浏览器缩放监听

摘要:这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮;ctrl配合-/+/0进行缩放。

这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:

  • ctrl配合鼠标滚轮
  • ctrl配合-/+/0进行缩放。

虽然没有专门的缩放事件,但是可以通过监听以上两种缩放操作事件进行达到“监听”缩放的目地:

  • Ctrl+鼠标滚轮缩放:监听DOMMouseScroll并判断是否触发了ctrl按键
  • 键盘快捷键缩放:监听keydown并判断按键是否是三种缩放操作的任一一种组合
//  Ctrl+鼠标滚轮缩放
document.addEventListener('DOMMouseScroll', function (e) {
  //监测滚轮事件中是否按下了Ctrl键
  if (e.ctrlKey) {
   //xxx
  }
})

//c2   键盘快捷键缩放
document.addEventListener('keydown', function (e) {
  //按下Ctrl 以及以下任意一键:+ - 或 0
  if (e.ctrlKey && (e.code === 'Equal' || e.code === 'Minus' || e.code === 'Digit0')) {
    xxx
  }
})

提示:获取缩放比例:window.devicePixelRadio

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_4134