vue监听鼠标与键盘事件

news2024/9/24 19:15:51
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.coloradmin.cn/o/689324.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GDAL 标记图像连接区域

文章目录 一、简介1.1原始算法1.2修改标记算法二、实现代码三、实现效果参考资料一、简介 1.1原始算法 标记图像连接区域的算法有很多,这里主要实现了一种基于扫描线的改进算法(Suzuki算法),原始算法使用了一种决策树策略,即对二进制图像b(x,y)进行重复传递,在前向和后向…

chatgpt赋能python:Python要点:从入门到精通

Python要点:从入门到精通 Python是一门高级编程语言,是一种解释型、面向对象、动态数据类型的语言。它的设计思想是“代码易读易写”,在数据科学、人工智能、自动化测试、Web开发等领域广泛应用。本文将从入门到精通的角度来介绍Python的要点…

模拟电路系列分享-电阻的选则

目录 概要 整体架构流程 技术名词解释 技术细节 1.阻值的选择 2.不能太小的原因 3.不能太大的原因 4.E系列选择 小结 概要 提示:这里可以添加技术概要 例如: 电阻(Resistor]是我们的老朋友了,从初中就认识。但到目前为止,我们却…

chatgpt赋能python:Python获取电脑IP:教你简单又快速的实现方式

Python获取电脑IP:教你简单又快速的实现方式 如果你是一名网络工程师或者Web开发者,那么获得电脑IP地址对你来说是一个常见的任务。而Python作为一种流行的脚本语言,也提供了多种方法来获取电脑的IP地址。下面我们将介绍三种Python获取电脑I…

深度生成模型系统的实现原理有哪些?未来的挑战是什么?

由于计算机性能的快速提升, 学习可观测样本的概率密度并随机生成新样本的生成模型成为热点。相比于需要学习条件概率分布的判别模型生成模型的训练难度大、模型结构复杂, 但除了能够生成新样本外, 生成模型在图像重构、缺失数据填充、密度估计、风格迁移和半监督学习等应用领域…

【因果图法和决策表】某软件的一个模块的需求规格说明书中描述:(1)年薪制员工:严重过失,扣年终风险金的4%;过失,扣年终风险金的2%。(2)非年薪制员工:严重过失,扣当月薪资的8%;过失,扣当月薪

题目: 某软件的一个模块的需求规格说明书中描述: (1)年薪制员工:严重过失,扣年终风险金的4%;过失,扣年终风险金的2%。 (2)非年薪制员工:严重过…

14.RocketMQ之高可用性机制

1.2 高可用性机制 RocketMQ分布式集群是通过Master和Slave的配合达到高可用性的。 Master和Slave的区别:在Broker的配置文件中,参数 brokerId的值为0表明这个Broker是Master,大于0表明这个Broker是 Slave,同时brokerRole参数也会说…

保证水库大坝安全需要做好哪方面的监测

水库安全监测是保证水库大坝安全的重要手段是确保水库大坝安全运行的基础也是做好水库安全管理的重要技术保障。根据《水库大坝安全管理条例》《水库大坝安全监测技术规范》等有关规定,对坝体变形、渗透、应力应变等进行监测,以掌握坝体、坝基和库岸的运…

css增加高斯模糊的效果

实现效果 关键代码 backdrop-filter 当你创造一个元素加上这个属性后,会使得这个元素后面的区域添加效果(如模糊或颜色偏移) background: rgba(0,0,0,.5);backdrop-filter: blur(10px);

MFC开发第二天 Windows计算器的开发,常用消息解析与处理

文章目录 相关概念陈述一、初始API汇总消息汇总 二、Windows计算器的开发三、常见的消息解析与处理附录 相关概念陈述 INT PTR是一个指向整数类型数据的指针。PTR是指针的缩写,INT是表示整数类型。因此,INT PTR表示指向整数类型的指针。 1、对话框弹出…

Ambari自动部署hadoop

1、Ambari介绍 Apache Ambari项目旨在通过开发用于配置,管理和监控Apache Hadoop集群的软件来简化Hadoop管理. Ambari提供了一个由RESTful API支持的直观,易用的Hadoop管理Web Ul。 Ambari使系统管理员能够: 提供Hadoop集群 Ambari提供了跨任意数量的主…

戴尔游匣笔记本Dell G16 7630原厂Win11系统重装,安装原装出厂OEM预装系统镜像,恢复出厂状态

DELL戴尔游匣笔记本电脑,Dell G16 7630原厂Windows11系统原装OEM预装系统镜像,恢复出厂状态 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、戴尔外星人控制中心等预装程序 链接:https://pan.baidu.com/s/10s7dFd1yHhUsgkKVS-No2A?…

数据库管理-第八十五期 19c OCM之路-准备与环境篇(20230626)

数据库管理 2023-06-26 第八十五期 19c OCM之路-准备与环境篇1 计划2 考试环境3 技巧和注意事项总结 第八十五期 19c OCM之路-准备与环境篇 从去年就有消息传出,OCM将从12c升级到19c,今年12c OCM停考,从业内大佬和OU处了解到其实今年3月30日…

JSP自定义标签【下】

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于自定义标签的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 导读: 💡辉辉…

linux-2.6.22.6内核信号量、阻塞和费阻塞

信号量 1.所谓信号量也是资源共享条件下保护资源的一种手段,当定义一个信号量时,这个信号量就相当于一个互斥锁,只能属于一个进程,我们把之前同一设备同一时刻只能由一个进程打开的原子变量操作改成信号量。 代码如下&#xff1…

黑河学院ASP.NET程序设计大作业(1)--搭建页面

一、作业简介: 说明:我分到的是上海交通大学-生命科学技术学院 网址:https://life.sjtu.edu.cn/ 二、作业流程: 前台: 1.确定技术点(是自己搭建,还是用框架) 2.搭建首页、所有的静态页面&#x…

NET Core添加 Sqlite 数据库

文章目录 相关文章回顾Sqlite安装环境说明Nuget安装测试程序 结尾 相关文章回顾 .net framework 命令行项目使用 sqlite,DbContext C# .NET EF框架 webapi 安装使用sqlite visual studio 2022,ADO.NET 实体数据模型添加 sqlite数据库对象 Sqlite安装 环境说明 …

周赛351(模拟、枚举答案、乘法原理+双指针(隔板问题)、栈的应用)

文章目录 周赛351[2748. 美丽下标对的数目](https://leetcode.cn/problems/number-of-beautiful-pairs/)模拟O(10n)做法 [2749. 得到整数零需要执行的最少操作数](https://leetcode.cn/problems/minimum-operations-to-make-the-integer-zero/)枚举答案 [2750. 将数组划分成若干…

ElementUI Table 表格动态添加行和列

一、效果 懒得发什么动态图&#xff0c;直接静态就好了。 二、代码 本文参考代码&#xff1a;https://blog.csdn.net/qq_33791597/article/details/125605873 有需求的可以去看下原文&#xff0c;我是参考后又改造了一番 <template> <div style"padding:10px&q…

磁盘 - 内存 - 中央处理器缓存 / 用户缓存区 - 内核缓存区 / 零拷贝

文章目录 磁盘 - 内存 - 中央处理器缓存用户缓存区 - 内核缓存区零拷贝意义 这些概念比较常用&#xff0c;涉及到物理设备 - 操作系统概念&#xff0c;操作系统概念 - 数据结构的区分。记录一下以供后人取笑。 磁盘 - 内存 - 中央处理器缓存 这些是计算机中比较常用的物理设备…