Vue 鼠标事件合集,关于鼠标右键的处理方法(改写鼠标右键方法、自定义鼠标右键)

news2025/2/8 4:50:00

鼠标事件使用

@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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2294594.html

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

相关文章

【Elasticsearch】terms聚合误差问题

Elasticsearch中的聚合查询在某些情况下确实可能存在误差&#xff0c;尤其是在处理分布式数据和大量唯一值时。这种误差主要来源于以下几个方面&#xff1a; 1.分片数据的局部性 Elasticsearch的索引通常被分成多个分片&#xff0c;每个分片独立地计算聚合结果。由于数据在分…

JavaScript的 switch 方法

• 1. 浅说JavaScript的 switch 方法 • 1.1. 语法 • 1.2. 关键点 • 1.3. 示例 • 1.4. 注意事项 1. 浅说JavaScript的 switch 方法 在JavaScript中&#xff0c;switch 语句是一种多分支选择结构&#xff0c;用于根据不同的条件执行不同的代码块。 它提供了一种比多个…

Mac本地部署DeekSeek-R1下载太慢怎么办?

Ubuntu 24 本地安装DeekSeek-R1 在命令行先安装ollama curl -fsSL https://ollama.com/install.sh | sh 下载太慢&#xff0c;使用讯雷&#xff0c;mac版下载链接 https://ollama.com/download/Ollama-darwin.zip 进入网站 deepseek-r1:8b&#xff0c;看内存大小4G就8B模型 …

[Java基础]函数式编程

Lambda函数 JDK8新增的语法形式, 使用Lambda函数替代某些匿名内部类对象&#xff0c;从而让程序代码更简洁&#xff0c;可读性更好。 基本使用 lambda表达式只能简化函数式接口的匿名内部类写法 // 1.定义抽象类 abstract class Animal {public abstract void crt(); }publi…

Linux 零拷贝技术

一、传统做法&#xff0c;经历“四次拷贝” 数据 1.读取到内核缓冲区 2.拷贝到用户缓冲区 3.写入到内核缓冲区 4.拷贝到网卡 使用 DMA&#xff0c;减少2次拷贝&#xff0c;还剩2次拷贝 DMA 负责硬盘到内核缓冲区和内核到网卡的传输。 CPU 仍需处理内核和用户缓冲区之间的数据…

【完整版】DeepSeek-R1大模型学习笔记(架构、训练、Infra)

文章目录 0 DeepSeek系列总览1 模型架构设计基本参数专家混合模型&#xff08;MoE&#xff09;[DeepSeek-V2提出, DeepSeek-V3改良]多头潜在注意力&#xff08;MLA&#xff09;[DeepSeek-V2提出]多token预测&#xff08;MTP&#xff09;[DeepSeek-V3提出] 2 DeepSeek-R1-Zero及…

数据结构(1)——算法时间复杂度与空间复杂度

目录 前言 一、算法 1.1算法是什么&#xff1f; 1.2算法的特性 1.有穷性 2.确定性 3.可行性 4.输入 5.输出 二、算法效率 2.1衡量算法效率 1、事后统计方法 2、事前分析估计方法 2.2算法的复杂度 2.3时间复杂度 2.3.1定义 2.3.2大O渐进表示法 2.3.3常见时间复…

uniapp小程序自定义中间凸起样式底部tabbar

我自己写的自定义的tabbar效果图 废话少说咱们直接上代码&#xff0c;一步一步来 第一步&#xff1a; 找到根目录下的 pages.json 文件&#xff0c;在 tabBar 中把 custom 设置为 true&#xff0c;默认值是 false。list 中设置自定义的相关信息&#xff0c; pagePath&#x…

C++编程语言:抽象机制:模板(Bjarne Stroustrup)

目录 23.1 引言和概观(Introduction and Overview) 23.2 一个简单的字符串模板(A Simple String Template) 23.2.1 模板的定义(Defining a Template) 23.2.2 模板实例化(Template Instantiation) 23.3 类型检查(Type Checking) 23.3.1 类型等价(Type Equivalence) …

DeepSeek-VL2论文解读:用于高级多模态理解的专家混合视觉语言模型

github:https://github.com/deepseek-ai/DeepSeek-VL2 paper: https://github.com/deepseek-ai/DeepSeek-VL2/blob/main/DeepSeek_VL2_paper.pdf 大型视觉语言模型&#xff08;VLMs&#xff09;已经成为人工智能领域的变革性力量&#xff0c;将大型语言模型&#xff08;LLMs&…

第二个Qt开发实例:在Qt中利用GPIO子系统和sysfs伪文件系统实现按钮(Push Button)点击控制GPIO口(效果为LED2灯的灭和亮)

引言 本文承接博文 https://blog.csdn.net/wenhao_ir/article/details/145420998 里的代码&#xff0c;在那里面代码的基础上添加上利用sysfs伪文件系统实现按钮(Push Button)点击控制GPIO口的代码&#xff0c;进而实现LED2灯的灭和亮。 最终的效果是点击下面的LED按钮实现LED…

Day37-【13003】短文,串的基本概念,匹配算法,算法时间复杂度,真题训练

文章目录 第二节 串串的基本概念串的模式匹配朴素的模式匹配算法(BF算法)算法最坏时间复杂度O(n x m) 改进的模式匹配算法(KMP算法)特征向量next&#xff0c;来确定k值特征向量next的算法实现 算法最坏时间复杂度O(n)进一步改进next值的计算&#xff0c;简化步骤 第四章真题真题…

陷入闭包:理解 React 状态管理中的怪癖

TLDR 闭包就像函数随身携带的背包&#xff0c;包含它们创建时的数据React 组件使用闭包来记住它们的状态和属性过时的闭包可能导致状态更新不如预期时的错误函数式更新提供了一个可靠的方式来处理最新状态 简介 你是否曾经疑惑过&#xff0c;为什么有时你的 React 状态更新不…

【SRC排名】安全应急响应中心SRC上榜记录

2023年 新氧第三 https://security.soyoung.com/top 合合第四 https://security.intsig.com/index.php?m&chall&aindex 2024年 好未来第一 https://src.100tal.com/index.php?m&chall&aindex&#xff08;官网是总榜&#xff0c;年榜只有海报&#xff09;…

Linux——基础命令1

$&#xff1a;普通用户 #&#xff1a;超级用户 cd 切换目录 cd 目录 &#xff08;进入目录&#xff09; cd ../ &#xff08;返回上一级目录&#xff09; cd ~ &#xff08;切换到当前用户的家目录&#xff09; cd - &#xff08;返回上次目录&#xff09; pwd 输出当前目录…

OSPF基础(1):工作过程、状态机、更新

OSPF基础 1、技术背景&#xff08;与RIP密不可分&#xff0c;因为RIP中存在的问题&#xff09; RIP中存在最大跳数为15的限制&#xff0c;不能适应大规模组网周期性发送全部路由信息&#xff0c;占用大量的带宽资源以路由收敛速度慢以跳数作为度量值存在路由环路可能性每隔30秒…

【目标检测】模型验证:K-Fold 交叉验证

K-Fold 交叉验证 1、引言1.1 K 折交叉验证概述 2、配置2.1 数据集2.2 安装包 3、 实战3.1 生成物体检测数据集的特征向量3.2 K 折数据集拆分3.3 保存记录3.4 使用 K 折数据分割训练YOLO 4、总结 1、引言 我们将利用YOLO 检测格式和关键的Python 库&#xff08;如 sklearn、pan…

Unity 2D实战小游戏开发跳跳鸟 - 计分逻辑开发

上文对障碍物的碰撞逻辑进行了开发,接下来就是进行跳跳鸟成功穿越过障碍物进行计分的逻辑开发,同时将对应的分数以UI的形式显示告诉玩家。 计分逻辑 在跳跳鸟通过障碍物的一瞬间就进行一次计分,计分后会同步更新分数的UI显示来告知玩家当前获得的分数。 首先我们创建一个用…

京准:NTP卫星时钟服务器对于DeepSeek安全的重要性

京准&#xff1a;NTP卫星时钟服务器对于DeepSeek安全的重要性 京准&#xff1a;NTP卫星时钟服务器对于DeepSeek安全的重要性 在网络安全领域&#xff0c;分布式拒绝服务&#xff08;DDoS&#xff09;攻击一直是企业和网络服务商面临的重大威胁之一。随着攻击技术的不断演化…

Android学习20 -- 手搓App2(Gradle)

1 前言 昨天写了一个完全手搓的&#xff1a;Android学习19 -- 手搓App-CSDN博客 后面谷歌说不要用aapt&#xff0c;d8这些来搞。其实不想弄Gradle的&#xff0c;不过想着既然开始了&#xff0c;就多看一些。之前写过一篇Gradle&#xff0c;不过是最简单的编译&#xff0c;不涉…