vue项目 如何判断用户按下了 ctrl + d 来收藏网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
...
  
data () {
    return {
      keyObj: {
        Control: -1,
        d: -1,
      },
    }
  },
...
 
mouted() {
    document.onkeydown = (e) => {
      // ctrl   keyCode ==> 17  |  D  d keyCode ==> 68
 
      // 用户按下 ctrl 17
      const { keyCode } = e
      // console.log('keyCode ===>', keyCode);
      if (keyCode === 17) {
        this.keyObj.Control = 17
      } else if (keyCode === 68 && this.keyObj.Control === 17) {
        this.keyObj.d = 68
      }
    }
    document.onkeyup = (e) => {
      const { keyCode } = e
      if (keyCode === 17) {
        this.keyObj = {
          Control: -1,
          d: -1,
        }
      }
    }
}
...
 
watch: {
    keyObj: {
      handler: function (obj) {
        this.ctrl$dHandler(obj)
      },
      deep: true
    }
 
},
...
 
methods: {
    ctrl$dHandler (obj) {
      const { Control, d, } = obj
      if (Control === 17 && d === 68) {
        // alert('用户按下了 ctrl + d, #######')
      }
    },
 
}

  

posted @   Naijiaz  阅读(411)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示