Vue 鼠标事件合集，关于鼠标右键的处理方法（改写鼠标右键方法、自定义鼠标右键）
鼠标事件使用
@mousedown="canvasDown($event)"按下
事件合集
click 点击某个对象时触发
mousedown 鼠标按钮被按下时触发
mouseup 鼠标按钮被松开时触发
mouseleave 当鼠标指针移出元素时触发
dblclick 双击时触发
mousemove 鼠标移动时触发，持续触发
mouseout 鼠标从某元素移开时触发
mouseover 鼠标移到某元素上时触发
mouseenter 鼠标移到某元素上时触发
contextmenu 右键触发
区分说明
mouseover 鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件
mouseenter 鼠标指针移入事件所绑定的元素时，会触发该事件
如果一个元素没有子元素，那么该元素绑定mouseover或者mouseenter两种事件效果没有区别，鼠标每次移入元素时都只会触发一次事件；
如果绑定了mouseover事件的元素存在子元素，那么，每次移入该元素时都会触发一次事件（包括从外部移入和从子元素移入），移入子元素时也会触发一次事件。
鼠标右键事件处理
方法1 contextmenu
document.addEventListener("contextmenu", function (e) {e.preventDefault(); //阻止右键默认行为console.log('右键');// do something});
方法2 mousedown
document.addEventListener("mousedown", function (e) {e.preventDefault();//此时阻止右键默认行为不生效，需要用方法1禁止该默认行为if (e.button == 0) {console.log("你按下了鼠标左键!");} else if (e.button == 1) {console.log("你按下了鼠标滚轮!");} else {console.log("您按下了鼠标右键!");}});
关于鼠标右键的更多应用
<template><div><div class="btn" @click.right="handleClick('1')">右键</div><div class="btn" @contextmenu="handleClick('2')">右键</div><div class="btn" @contextmenu.prevent="handleClick('3')">右键 阻止默认行为</div><div class="btn" @contextmenu="handleClicks($event)">右键 阻止默认行为</div><div class="btn" id="btn">右键 来自监听</div></div>
</template><script>
export default {mounted() {// 指定元素添加右键监听document.getElementById("btn").addEventListener("contextmenu", function (e) {e.preventDefault(); //阻止右键默认行为console.log("右键");});},methods: {handleClick(key) {console.log("右键", key);},handleClicks(e) {e.preventDefault(); //阻止右键默认行为console.log("右键", e);},},
};
</script>
<style scoped>
.btn {height: 30px;border: 1px solid #000;
}
</style>
相关文章：
Vue 鼠标事件合集，关于鼠标右键的处理方法（改写鼠标右键方法、自定义鼠标右键）
鼠标事件使用 mousedown"canvasDown($event)"按下事件合集 click 点击某个对象时触发 mousedown 鼠标按钮被按下时触发 mouseup 鼠标按钮被松开时触发 mouseleave 当鼠标指针移出元素时触发 dblclick 双击时触发 mousemove 鼠标移动时触发，…...
go语言中的接口
接口简介 现实生活中的接口 现实生活中手机、相机、U 盘都可以和电脑的 USB 接口建立连接。我们不需要关注 usb 卡槽大小是否一样，因为所有的 USB 接口都是按照统一的标准来设计的。 Golang 中的接口（interface） Golang 中的接口是一种抽象…...
如何在Android Studio中开发一个简单的Android应用？
Android Studio是开发Android应用的官方集成开发环境（IDE），它提供了许多强大的功能，使得开发者能够高效地创建Android应用。如果你是Android开发的初学者，本文将引导你如何在Android Studio中开发一个简单的Android应用…...
启明星辰发布MAF大模型应用防火墙产品，提升DeepSeek类企业用户安全
2月7日，启明星辰面向DeepSeek等企业级大模型业务服务者提供的安全防护产品——天清MAF（Model Application Firewall）大模型应用防火墙产品正式发布。 一个新赛道将被开启…… DeepSeek的低成本引爆赛道规模 随着DeepSeek成为当前最热的现象级…...
开箱即用的.NET MAUI组件库 V-Control 发布了!
之前写过挺多的MAUI Sample，其中有很多代码可以打包成组件，当组件完善到一定程度，我会把控件封装起来放到控件库中。 今天，在这个仓库建立一年零八个月后，我觉得可以考虑将其作为开源库发布。 有很多网友在观望.NET …...
android skia渲染介绍
Android AOSP 的渲染系统主要使用 Skia 图形库。Skia 是一个开源的 2D 图形库，它被广泛应用于 Android 的图形渲染中，负责绘制 UI 元素、文本、图像以及其他 2D 图形内容。 以下是 Android AOSP 中 Skia 的作用和它在渲染系统中的位置： 1. 什…...
MySQL的底层原理与架构
前言 了解MySQL的架构和原理对于很多的后续很多的操作会有很大的帮助与理解。并且很多知识都与底层架构相关联。 了解MySQL架构 通过上面的架构图可以得知，Server层中主要由 连接器、查询缓存、解析器/分析器、优化器、执行器 几部分组成的，下面将主要…...
GB/T 43698-2024 《网络安全技术 软件供应链安全要求》标准解读
一、43698-2024标准图解 https://mmbiz.qpic.cn/sz_mmbiz_png/rwcfRwCticvgeBPR8TWIPywUP8nGp4IMFwwrxAHMZ9Enfp3wibNxnfichT5zs7rh2FxTZWMxz0je9TZSqQ0lNZ7lQ/640?wx_fmtpng&fromappmsg 标准在线预览： 国家标准|GB/T 43698-2024 相关标准： &a…...
Vue（4）
一.组件的三大组成部分-注意点说明 （1）scoped样式冲突 默认情况：写在组件中的样式会全局生效 → 因此很容易造成多个组件之间的样式冲突 ①全局样式：默认组件中的样式会作用到全局 ②局部样式：可以给组件加上scoped属…...
)
实验3 词法分析(二)
实验3 词法分析(二) [实验目的]： 1 . 熟悉给定的词法分析程序； 2 . 改进词法分析程序。 [实验内容]： 1.尝试多方面改进TEST语言的文法，参考教材附录B词法分析程序TESTscan.c，在此词法分析程序的基础上改进程序&#x…...
MYSQL第四次
目录 题目分析 代码实现 一、修改 Student 表中年龄（sage）字段属性，数据类型由 int 改变为 smallint 二、为 Course 表中 Cno 字段设置索引，并查看索引 三、为 SC 表建立按学号（sno）和课程号ÿ…...
CentOS 7配置samba服务设置文件共享
CentOS 7配置samba服务设置文件共享 一、生成另一个Linux系统，名为Linux-client，作为测试系统。 [rootliunx-client ~]# hostnamectl set-hostname Liunx-client二、如果没有则安装Samba服务，如果已经安装则省略此步。 yum install samba…...
分布式微服务系统架构第91集：系统性能指标总结
加群联系作者vx：xiaoda0423 仓库地址：https://webvueblog.github.io/JavaPlusDoc/ 系统性能指标总结 系统性能指标包括哪些？ 业务指标、资源指标、中间件指标、数据库指标、前端指标、稳定性指标、批量处理指标、可扩展性指标、可靠性指标。 …...
【算法】动态规划专题⑦ —— 多重背包问题 + 二进制分解优化 python
目录 前置知识进入正题优化方法：二进制分解实战演练 前置知识 【算法】动态规划专题⑤ —— 0-1背包问题 滚动数组优化 python 【算法】动态规划专题⑥ —— 完全背包问题 python 进入正题 多重背包问题I https://www.acwing.com/problem/content/4/ 题目描述 有…...
Node.js学习指南
一、模块化规范 nodejs使用的模块化规范 叫做 common.js 规范: 每一个模块都有独立的作用域 代码在各自模块中执行 不会造成全局污染 每一个模块都是一个独立的文件（module对象） 模块可以被多次加载（module.exports 属性） 但是仅…...
Mybatis篇
1，什么是Mybatis （ 1 ）Mybatis 是一个半 ORM（对象关系映射）框架，它内部封装了 JDBC，开发时只需要关注 SQL 语句本身，不需要花费精力去处理加载驱动、创建连接、创建 statement 等繁…...
微信小程序案例1——制作猫眼电影底部标签导航栏
文章目录 一、项目步骤1 新建一个无AppID的movie项目2将准备好的底部标签导航图标拷贝到movie项目下面(将图标文件夹image放到项目文件夹里）3 打开App.json配置文件，在pages数组里添加4个页面路径:电影“pages/movie/movie”、影院“pages/cinema/cinema…...
Docker 数据卷（Volume）详细介绍
Docker 数据卷（Volume）详细介绍 1. 什么是 Docker 数据卷？ Docker 数据卷（Volume）是一种用于 持久化数据 和 容器间数据共享 的机制。由于容器的存储是临时的，容器删除后其中的数据会丢失，因此…...
Redis --- 使用Feed流实现社交平台的新闻流
要实现一个 Feed 流（类似于社交媒体中的新闻流），通常涉及以下几个要素： 内容发布：用户发布内容（例如文章、状态更新、图片等）。内容订阅：用户可以订阅其他用户的内容，获…...
WPF 在后台使TextBox失去焦点的方法
在软件设计开发的时候，偶尔会遇到在后台xaml.cs后台中，要将TextBox控件的焦点取消或者使TextBox控件获取焦点，下面介绍讲述一种简单的“只让特定的 TextBox 失去焦点”方法: 前端xaml代码示例： <StackPanel Orientation"…...
自动化测试、压力测试、持续集成
因为项目的原因，前段时间研究并使用了 SoapUI 测试工具进行自测开发的 api。下面将研究的成果展示给大家，希望对需要的人有所帮助。 SoapUI 是什么？ SoapUI 是一个开源测试工具，通过 soap/http 来检查、调用、实现 Web Service 的…...
Mac电脑上好用的压缩软件
在Mac电脑上，有许多优秀的压缩软件可供选择，这些软件不仅支持多种压缩格式，还提供了便捷的操作体验和强大的功能。以下是几款被广泛推荐的压缩软件： BetterZip 功能特点：BetterZip 是一款功能强大的压缩和解压缩工具&a…...
C++ 使用CURL开源库实现Http/Https的get/post请求进行字串和文件传输
CURL开源库介绍 CURL 是一个功能强大的开源库，用于在各种平台上进行网络数据传输。它支持众多的网络协议，像 HTTP、HTTPS、FTP、SMTP 等，能让开发者方便地在程序里实现与远程服务器的通信。 CURL 可以在 Windows、Linux、macOS 等多种操作系…...
[创业之路-276]：从燃油汽车到智能汽车：工业革命下的价值变迁
目录 前言： 从燃油汽车到智能汽车：工业革命下的价值变迁 前言： 燃油汽车，第一次、第二次工业革命，机械化、电气化时代的产物，以机械和电气自动化为核心价值。 智能汽车，第三次、第四次工业革…...
DeepSeek服务器繁忙问题的原因分析与解决方案
一、引言 随着人工智能技术的飞速发展，DeepSeek 等语言模型在众多领域得到了广泛应用。然而，在春节这段时间的使用过程中，用户常常遭遇服务器繁忙的问题，这不仅影响了用户的使用体验，也在一定程度上限制了模型的推广和…...
【python】简单的flask做页面。一组字母组成的所有单词。这里的输入是一组字母，而输出是所有可能得字母组成的单词列表
目录结构如下： . ├── static │ ├── css │ │ └── styles.css │ └── js │ └── scripts.js ├── templates │ ├── base.html │ ├── case_converter.html │ ├── index.html │ └── word_finder.html ├── app.py ├── tree.py…...
【华为OD-E卷 - 114 找最小数 100分（python、java、c++、js、c）】
【华为OD-E卷 - 找最小数 100分（python、java、c、js、c）】 题目 给一个正整数NUM1，计算出新正整数NUM2，NUM2为NUM1中移除N位数字后的结果，需要使得NUM2的值最小 输入描述 输入的第一行为一个字符串，字…...
Maven 依赖管理全面解析
目录 1. Maven 简介 2. 依赖的基本概念 依赖坐标 依赖范围 3. Maven 仓库 本地仓库 远程仓库 4. 依赖传递 5. 依赖冲突 6. 在 pom.xml 文件中管理依赖 基本依赖配置 依赖范围配置 依赖排除配置 依赖管理配置（） 1. Maven 简介 Maven 是一个…...
基于C#语言的海康威视智能车牌识别系统
基于C#语言的海康威视智能车牌识别系统，通过布控对来往车辆进行检测抓拍 资源文件列表 AICar.sln , 984 AICar.sln.GhostDoc.xml , 1306 AICar.v12.suo , 72704 AICar/AICar.csproj , 3573 AICar/AICar.csproj.user , 228 AICar/bin/Debug/AICar.exe , 220672 AIC…...
RabbitMQ 从入门到精通：从工作模式到集群部署实战（五）
#作者：闫乾苓 系列前几篇： 《RabbitMQ 从入门到精通：从工作模式到集群部署实战（一）》：link 《RabbitMQ 从入门到精通：从工作模式到集群部署实战（二）》： lin…...
清理服务器/docker容器
清理服务器 服务器或docker容器清理空间。 清理conda环境 删除不用的conda虚拟环境： conda env remove --name python38 conda env remove --name python310清理临时目录：/tmp du -sh /tmp # 查看/tmp目录的大小/tmp 目录下的文件通常是可以直接删除…...
【专题】2024-2025人工智能代理深度剖析：GenAI 前沿、LangChain 现状及演进影响与发展趋势报告汇总PDF洞察（附原数据表）
原文链接：https://tecdat.cn/?p39630 在科技飞速发展的当下，人工智能代理正经历着深刻的变革，其能力演变已然成为重塑各行业格局的关键力量。从早期简单的规则执行，到如今复杂的自主决策与多智能体协作，人工智能代理…...
广度优先搜索（BFS）算法详解——以走迷宫问题为例
引言：当算法遇见迷宫 想象你置身于一个复杂的迷宫，如何在最短时间内找到出口？这个问题不仅存在于童话故事中，更是计算机科学中经典的路径搜索问题。本文将带你通过走迷宫问题，深入理解广度优先搜索（BFS&am…...
【大数据技术】用户行为日志分析（python+hadoop+mapreduce+yarn+hive）
用户行为日志分析（python+hadoop+mapreduce+yarn+hive） 搭建完全分布式高可用大数据集群（VMware+CentOS+FinalShell） 搭建完全分布式高可用大数据集群（Hadoop+MapReduce+Yarn） 本机PyCharm远程连接虚拟机Python 搭建完全分布式高可用大数据集群（MySQL+Hive）...
C语言基础之【数组和字符串】（上）
C语言基础之【数组和字符串】（上） 概述一维数组一维数组的定义一维数组的初始化一维数组的访问一维数组的遍历数组名一维数组的常用数据强化训练一维数组的最值一维数组的逆置一维数组的排序（冒泡排序） 二维数组二维数组的定义二维…...
Maven插件—flatten-maven-plugin：工程模块统一版本依赖
文章目录 前言一、认识flatten-maven-plugin插件二、如何使用flatten-maven-plugin插件？未使用flatten-maven-plugin插件之前的情况描述配置flatten-maven-plugin插件步骤1：最外层父模块安装插件&配置版本变量步骤2：各个自模块使用版本使…...
Linux系统 环境变量
环境变量 写在前面概念查看环境变量main函数的参数argc & argvenv bash环境变量 写在前面 对于环境变量，本篇主要介绍基本概念及三四个环境变量 —— PATH、HOME、PWD。其中 PATH 作为 “ 敲门砖 ”，我们会更详细讲解；理解环境变量的全局…...
TAPEX：通过神经SQL执行器学习的表格预训练
摘要 近年来，语言模型预训练的进展通过利用大规模非结构化文本数据取得了巨大成功。然而，由于缺乏大规模高质量的表格数据，在结构化表格数据上应用预训练仍然是一个挑战。本文提出了TAPEX，通过在一个合成语料库上学习神经SQL执行…...
)
Ruby：从宝石到编程语言的奇妙联系(中英双语)
Ruby：从宝石到编程语言的奇妙联系 在珠宝世界中，红宝石（Ruby）是一种象征热情、力量和高贵的珍贵宝石；而在编程世界中，Ruby则是一门灵活、优雅且富有创造力的编程语言。那么，这两者究竟有何联系…...
RLHF中的on-policy和off-policy的区别
在LLM（大语言模型）和RLHF（基于人类反馈的强化学习）中，on-policy和off-policy的主要区别在于数据的来源和策略更新的方式。以下是两者的详细对比以及各自的典型算法： On-policy 和 Off-policy 的区别 特性…...
计算机考研复试上机02
目录 3、排序 1）排序（华中科技大学复试上机题） 2）成绩排序（清华大学复试上机题） 3）特殊排序（华中科技大学复试上机题） 4）整数奇偶排序（北京大学复试上机题） 5）小白鼠排队（北京大学复试上机题） 4、查找 1）找 x（哈尔滨工业大学复试上机题） 2）查找（北…...
利用ETL工具进行数据挖掘
ETL的基本概念 数据抽取（Extraction）：从不同源头系统中获取所需数据的步骤。比如从mysql中拿取数据就是一种简单的抽取动作，从API接口拿取数据也是。 数据转换（Transformation）：清洗、整合和转…...
02DevOps基础环境准备
准备两台Linux的操作系统，最简单的方式就是在本机上使用虚拟机搭建两个操作系统（实际生产环境是两台服务器，虚拟机的方式用于学习使用） 我搭建的两台服务器的ip分别是192.168.1.10、192.168.1.11 192.168.1.10服务器用于安装doc…...
Kafka 入门与实战
一、Kafka 基础 1.1 创建topic kafka-topics.bat --bootstrap-server localhost:9092 --topic test --create 1.2 查看消费者偏移量位置 kafka-consumer-groups.bat --bootstrap-server localhost:9092 --describe --group test 1.3 消息的生产与发送 #生产者 kafka-cons…...
VM虚拟机安装群晖系统
下载群晖系统 https://download.csdn.net/download/hmxm6/90351935 安装群晖连接软件 synology-assistant-6.2-24922(在上面的压缩包里面) 准备好VM虚拟机 创建群晖虚拟机 打开下载下来的虚拟机 添加硬盘 选择类型 创建新的磁盘 指定容量 指定存储文件 完成硬盘添加…...
关于ESP-IDF 5.4 中添加第三方组件esp32-camera找不到文件，编译错误解决办法（花了一天时间解决）
最近需要使用ESP32-S3-CAM 的OV2640摄像头采集图像，为了加速开发进度，于是选择了esp32-camera组件，该组件不是官方组件，需要自己git clone。但在为项目添加esp32-camera组件时，一直编译错误，找不到头文件&a…...
【C++】C++11
目录 C11简介 统一的列表初始化 {}初始化 std::initializer_list 声明 auto decltype nullptr 范围for循环 智能指针 STL中的一些变化 右值引用和移动语义 左值引用和右值引用 右值引用的意义 完美转发 lambda表达式 新的类功能 可变参数模版 包装器 func…...
Intellij IDEA如何查看当前文件的类
快捷键：CtrlF12，我个人感觉记快捷键很麻烦，知道具体的位置更简单，如果忘了快捷键（KeyMap）看一下就记起来了，不需要再Google or Baidu or GPT啥的，位置：Navigate > Fi…...
CF 278A.Circle Line
题目分析 输入n个数据作为路径，求从a到b的最短距离，需要将其相成一个圆圈，既可以从小往大走又可以从大往小走 思路分析 依然将数据存为数组，通过下标进行操作，既然说了有两种方式那就计算两种方式哪个更快就输出谁 代…...
Naive UI去掉n-select下拉框边框，去掉n-input输入框边框
1、第一种通过js去掉 <template><div><div style"margin-top:10px;width: 100%;"><dade-descriptions><tr><dade-descriptions-item label"代理名称"><dade-input placeholder"代理名称"></dade-…...