vue监听鼠标与键盘事件

news/2024/7/19 14:57:02 标签: vue.js, 前端, js
mounted () {
    window.addEventListener('mousedown', this.handleMousedown)//监听鼠标按下
    window.addEventListener('mouseup', this.handleMouseup)//监听鼠标抬起
    window.addEventListener('keydown', this.handlekeydown)//监听键盘按下
  },
  methods: {
    // 鼠标按下事件
    handleMousedown (e) {
      if (e.button == 0) {
        console.log('鼠标左键按下')
      }
      if (e.button == 1) {
        console.log('鼠标滚动键按下')
      }
      if (e.button == 2) {
        console.log('鼠标右键按下')
      }
        console.log(e.pageX, e.pageY)// 坐标
    },
    // 鼠标抬起事件
    handleMouseup (e) {
      if (e.button == 0) {
        console.log('鼠标左键抬起')
      }
      if (e.button == 1) {
        console.log('鼠标滚动键抬起')
      }
      if (e.button == 2) {
        console.log('鼠标右键抬起')
      }
      console.log(e.pageX, e.pageY)// 坐标
    },
    // 监听键盘事件
    handlekeydown (e) {
      console.log(e)
    }
  },

 效果:

 


http://www.niftyadmin.cn/n/447743.html

相关文章

JS 删除数组中某个元素

目录 第一种:删除最后一个元素 pop 删除 slice 删除 splice 删除 for 删除 length 删除 第二种: 删除第一个元素 shift 删除 slice 删除 splice 删除 第三种:删除数组中某个指定下标的元素 splice 删除 for 删除 第四种:删除数…

Dockerfile设置多个extra-index-url源

设置如下 RUN pip config set global.extra-index-url https://xxx.xxx.xxx1/py/simple https://pypi https://xxx.xxx.xxx2/py/simple ……每个pip源的URL都使用空格分开

【GO】 32.pprof

一 . 添加引用启动项目访问指标页面 1.1 在main程序添加pprof引用,并启动网页 "net/http" _ "net/http/pprof" go func() {log.Println(http.ListenAndServe(":6060", nil)) }() 1.2 访问pprof页面 http://127.0.0.1:6060/debug/…

使用了java自带的Pair类造成部署测试环境失败

背景:写一个新功能时用了javafx.util包下的Pair类,本地调试没问题,但是部署到测试环境时使用jenkis一直在重试健康检查, FAILED - RETRYING: Healthcheck | Wait for ysdq-long-bms to be healthy on URLs [u’http://localhost:8…

Golang笔记:使用json包处理JSON数据

文章目录 目的Decoding(解析数据)Encoding(创建数据)总结 目的 JSON 是一种非常流行的数据交换格式,是JavaScript中原生支持的一种数据,因为其简单方便,所以也经常用在不同程序、不同语言间数据…

git提交忽略target文件

背景 项目如果没有设置.ignore文件,则我们的idea待提交区域有好多红色的新增的target文件、.iml文件等。 解决 本来未忽略前如下: 在.ignore文件中新增如下命令 #忽略所有.svn目录 .svn/ #忽略所有target目录 target/ #忽略所有.idea目录 .idea/ #…

Unity3d_shader_Outline()

1、[Unity] 引入“全局轮廓”,只需附加组件即可使用轮廓着色器 【Unity】コンポーネントをアタッチするだけでアウトラインシェーダが使用できる「Global Outline」紹介 - コガネブログ 下载:https://github.com/rickomax/globaloutline 2、[Unity] 綺…

css 如果英文字母换行问题

如果英文字母或者和中文字母在一起的英文字符直接使用text-wrap:wrap是不起作用的。 如:aaaaaaaaabbbbbbbddddcccccccccccccaaaaaaaa中华人民共和国 可以使用 word-break:break-all