当前位置： 首页 > news >正文

前端案例---自定义鼠标右键菜单

news 2026/4/8 9:16:03

 之前右击出现默认的选项菜单，使用evt.preventDefault()把默认的去掉，然后自定义右击的样式

 

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style: none;width: 200px;padding: 10px;border: 1px solid black;display: none;position: absolute;}ul li:hover{background: blue;}</style>
</head>
<body><ul id="list"><li class="aaa">11111111</li><li class="bbb">22222222</li><li class="ccc">333333333</li></ul><script>document.addEventListener("contextmenu",function(evt){evt.preventDefault()list.style.display = "block"var x = evt.clientXvar y = evt.clientYif(x >= document.documentElement.clientWidth-list.offsetWidth)x = document.documentElement.clientWidth-list.offsetWidthif(y >= document.documentElement.clientHeight-list.offsetHeight)y = document.documentElement.clientHeight-list.offsetHeightlist.style.left = x + "px"list.style.top = y + "px"})// 点击左键消失document.addEventListener("click",()=>{list.style.display = "none"})list.onclick = function(){console.log("list")}</script>
</body>
</html>

相关文章：

前端案例---自定义鼠标右键菜单

之前右击出现默认的选项菜单&#xff0c;使用evt.preventDefault()把默认的去掉&#xff0c;然后自定义右击的样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible"…...

编程日记 2024/12/26 5:30:22

浅谈归一化

在深度学习中&#xff0c;对网络层进行归一化&#xff08;Normalization&#xff0c;简称Norm&#xff09;是一个重要的技巧。常见的归一化方法包括批归一化&#xff08;Batch Normalization&#xff09;、层归一化&#xff08;Layer Normalization&#xff09;、实例归一化&am…...

编程日记 2024/12/26 5:29:21

lodash常用函数

文章目录 一、数组1、chunk分组2、difference、differenceBy、differenceWith3、findIndex4、intersection、intersectionBy、intersectionWith5、union、unionBy、unionWith 二、对象1、pick、omit 2、get、set三、数学1、sum、sumBy2、range 四、工具函数1、isEqual、isEmpty…...

编程日记 2024/12/26 5:28:20

触控算法总结

一、触控湿手指算法的具体实现原理涉及多个方面的技术和方法,主要包括以下几个关键点 1.电容变化检测 电容式触摸屏通过检测电容变化来确定触摸位置。当手指接触屏幕时,会引起电容的变化。然而,当手指湿润时,水分会影响电容值,导致触摸屏误判成无法正确识别触控点 2.噪声过滤: …...

编程日记 2024/12/26 5:26:17

齐次矩阵包含平移和旋转

第一个矩阵旋转矩阵 A [ R 1 0 0 1 ] A\left[\begin{matrix}R_{1} & 0\\0 & 1\end{matrix}\right] A[R1​0​01​] 第一个平移矩阵 B [ 1 T 1 0 1 ] B\left[\begin{matrix}1 & T_{1}\\0 & 1\end{matrix}\right] B[10​T1​1​] C [ R 2 0 0 1 ] C\left[\be…...

编程日记 2024/12/26 5:23:14

Move AI技术浅析（四）：运动跟踪与估计

一、运动跟踪与估计模块概述 运动跟踪与估计 是 Move AI 的核心模块之一&#xff0c;其主要任务是从提取到的关键点特征中&#xff0c;分析和理解运动的动态特性&#xff0c;包括运动轨迹、速度、加速度、方向等。该模块通常包括 时间序列分析 和 运动估计 两个子模块。 时间…...

编程日记 2024/12/26 5:22:13

NCR+可变电荷块3——NCB/cell绘图1

文献method参考&#xff1a; 蛋白质序列数据从uniprot中获取 https://www.uniprot.org/uniprotkb/P46013/entry https://www.uniprot.org/uniprotkb/P06748/entry、 1&#xff0c;电荷分布计算&#xff1a; Charge distribution was calculated as the sum of the charges …...

编程日记 2024/12/26 5:21:12

数据仓库是什么？数据仓库简介

数据仓库&#xff08;Data Warehouse&#xff09;是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合&#xff0c;用于支持企业的管理决策。以下是对数据仓库的详细解释&#xff1a; 一、定义与特性 定义&#xff1a;数据仓库是构建在组织的现有数据基础上&#x…...

编程日记 2024/12/26 5:13:04

AI的进阶之路：从机器学习到深度学习的演变（二）

AI的进阶之路&#xff1a;从机器学习到深度学习的演变&#xff08;一&#xff09; 三、机器学习&#xff08;ML&#xff09;&#xff1a;AI的核心驱动力 3.1 机器学习的核心原理 机器学习&#xff08;Machine Learning, ML&#xff09;突破了传统编程的局限&#xff0c;它不再…...

编程日记 2024/12/26 5:10:01

C++中属性（Attributes）

属性&#xff08;Attributes&#xff09;在 C 中的完整讲解 在 C 中&#xff0c;属性&#xff08;Attributes&#xff09; 是一种编译时机制&#xff0c;用于附加元数据到函数、变量、类型等元素上&#xff0c;以指导编译器如何优化、检查、警告或者改变编译行为。通过属性&am…...

编程日记 2024/12/26 5:08:00

Go语言中的defer，panic，recover 与错误处理

目录 前言 三个关键字 defer语句 panic语句 recover函数 defer、panic、recover组成的错误处理 总结 前言 在其他编程语言中&#xff0c;如Java&#xff0c;宕机往往以异常的形式存在。底层抛出异常&#xff0c;上层逻辑通过try...catch...fanally机制捕获异常并处理&am…...

编程日记 2024/12/26 5:06:58

（C语言）力扣 904.水果成篮

写在所有的前面&#xff1a; 本文采用C语言实现代码 目录 写在所有的前面&#xff1a;题目说明题目&#xff1a;力扣 904.水果成篮题目出处题目描述Description输入Input输出Output样例Sample限制Hint 解答说明方案解题思路一般情况特殊情况 代码实现其他解释 题目说明 题目…...

编程日记 2024/12/26 5:04:56

2024 年12月英语六级CET6听力原文(Lecture部分)

2024 年12月英语六级CET6听力原文(Long Conersation和Passage) 1 牛津大学关于普遍道德准则的研究及相关观点与建议 译文 2 食物颜色对味觉体验及大脑预期的影响 译文 3 财务资源对意义与幸福之间关系的影响研究 译文...

编程日记 2024/12/26 5:01:52

CentOS下，离线安装vscode的步骤；

前置条件&#xff1a; 1.CentOS7; 步骤&#xff1a; 1.下载vscode指定版本&#xff0c;例如&#xff1b; 例如 code-1.83.1-1696982959.el7.x86_64.rpm 2.使用下面命令&#xff1a; sudo rpm -ivh code-1.83.1-1696982959.el7.x86_64.rpm 其他&#xff1a; 卸载vscode的命…...

编程日记 2024/12/26 4:59:51

ubuntu停止.netcore正在运行程序的方法

在Ubuntu系统中停止正在运行的.NET Core程序&#xff0c;你可以使用以下几种方法&#xff1a; 使用kill命令&#xff1a; 如果你知道.NET Core程序的进程ID&#xff08;PID&#xff09;&#xff0c;你可以直接使用kill命令来停止它。首先&#xff0c;使用ps命令配合grep来查找.…...

编程日记 2024/12/26 4:58:50

机器学习基础 衡量模型性能指标

目录 1 前言 ​编辑1.1 错误率(Error rate)&精度(Accuracy)&误差(Error)&#xff1a; 1.2 过拟合(overfitting): 训练误差小&#xff0c;测试误差大 1.3 欠拟合(underfitting)&#xff1a;训练误差大&#xff0c;测试误差大 1.4 MSE: 1.5 RMSE: 1.6 MAE: 1.7 R-S…...

编程日记 2024/12/26 4:55:47

《OpenCV计算机视觉》-对图片的各种操作（均值、方框、高斯、中值滤波处理）及形态学处理

文章目录 《OpenCV计算机视觉》-对图片的各种操作&#xff08;均值、方框、高斯、中值滤波处理&#xff09;边界填充阈值处理图像平滑处理生成椒盐图片均值滤波处理方框滤波处理高斯滤波处理中值滤波处理 图像形态学腐蚀膨胀开运算闭运算顶帽和黑帽 《OpenCV计算机视觉》-对图片…...

编程日记 2024/12/26 4:51:44

如何让Tplink路由器自身的IP网段 与交换机和电脑的IP网段 保持一致？

问题分析&#xff1a; 正常情况下&#xff0c;我的需求是&#xff1a;电脑又能上网&#xff0c;又需要与路由器处于同一局域网下&#xff08;串流Pico4 VR眼镜&#xff09;&#xff0c;所以&#xff0c;我是这么连接 交换机、路由器、电脑 的&#xff1a; 此时&#xff0c;登录…...

编程日记 2024/12/26 4:50:43

【JetPack】Navigation知识点总结

Navigation的主要元素&#xff1a; 1、Navigation Graph&#xff1a; 一种新的XML资源文件,包含应用程序所有的页面&#xff0c;以及页面间的关系。 <?xml version"1.0" encoding"utf-8"?> <navigation xmlns:android"http://schemas.a…...

编程日记 2024/12/26 4:49:42

InnoDB引擎的内存结构

InnoDB擅长处理事务&#xff0c;具有自动崩溃恢复的特性 架构图&#xff1a; 由4部分组成&#xff1a; 1.Buffer Pool&#xff1a;缓冲池&#xff0c;缓存表数据和索引数据&#xff0c;减少磁盘I/O操作&#xff0c;提升效率 2.change Buffer&#xff1a;写缓冲区&#xff0c…...

编程日记 2024/12/26 4:47:39

OpenClaw对比测试：Qwen3.5-9B与14B版本在自动化任务中的表现

OpenClaw对比测试&#xff1a;Qwen3.5-9B与14B版本在自动化任务中的表现 1. 测试背景与动机 最近在折腾OpenClaw自动化任务时&#xff0c;遇到一个很实际的问题&#xff1a;到底该用Qwen3.5-9B还是14B版本&#xff1f; 这两个版本在官方文档里都标榜"强逻辑推理"和…...

编程新知 2026/4/8 8:00:13

FireRedASR-AED-L在STM32项目中的应用：离线语音指令识别原型开发

FireRedASR-AED-L在STM32项目中的应用&#xff1a;离线语音指令识别原型开发 最近在做一个智能家居控制的小项目&#xff0c;核心想法挺简单&#xff1a;对着设备说句话&#xff0c;它就能听懂并执行开关灯、调节风扇之类的操作。听起来是不是有点像智能音箱&#xff1f;但我的…...

编程新知 2026/4/8 6:42:33

【2026知网预警】不想论文被直接退稿？10款降AI工具实测红黑榜，带你避开90%的坑

说真的&#xff0c;现在写论文难&#xff0c;改论文更难。交稿前一查&#xff0c;心都凉半截。AI痕迹动不动就飘红&#xff0c;导师那边没法交代&#xff0c;系统检测也过不了关。为了找出靠谱的降AI法子&#xff0c;我也是折腾了好几天。 我把以下10个降AI工具一个个试过来了…...

编程新知 2026/4/8 6:03:52

手把手教你用思博伦GSS7000的SimReplayPlus模块：从硬件连接到功率调节的完整避坑指南

手把手教你用思博伦GSS7000的SimReplayPlus模块&#xff1a;从硬件连接到功率调节的完整避坑指南 第一次接触思博伦GSS7000卫星导航模拟器时&#xff0c;面对复杂的硬件接口和PosApp软件里密密麻麻的参数&#xff0c;不少工程师会感到无从下手。作为业内公认的高精度测试设备&a…...

编程新知 2026/4/8 5:49:45

14 - SVM的用户态API接口

难度: 🟡🔴 中级 预计学习时间: 2小时 前置知识: 第4章（核心数据结构）、第6章（范围管理） 📋 概述 SVM（Shared Virtual Memory）的用户态接口是上层框架（ROCm runtime、HSA runtime）与内核驱动之间的唯一公开契约。整个SVM用户态API只有一个IOCTL命令 AMDKFD_IOC_…...

编程新知 2026/4/8 3:47:16

Obsidian插件实战：5个提升笔记效率的神器（附避坑指南）

Obsidian插件实战&#xff1a;5个提升笔记效率的神器&#xff08;附避坑指南&#xff09; 如果你正在寻找能够真正提升Obsidian笔记效率的插件组合&#xff0c;这篇文章将为你揭示5个经过实战检验的效率神器。不同于泛泛而谈的插件列表&#xff0c;我们聚焦于那些能够形成工作…...

编程新知 2026/4/8 3:35:12

找靠谱支付通道？这 5 个核心要点 + 筛选技巧必看

想找到靠谱的支付通道&#xff0c;重点关注 5 大核心维度&#xff0c;再配合辅助筛选方法&#xff0c;就能避开大部分坑&#xff1a;资金安全是底线&#xff1a;优先选有央行支付牌照、资金存管合规的机构&#xff0c;避免资金风险。通道稳定是关键&#xff1a;确保交易高峰期不…...

编程新知 2026/4/8 2:13:39

4.VLAN 技术：二层网络的优化之道

一、网络发展的困境与挑战&#xff08;一&#xff09;早期网络的冲突域问题在网络发展的早期阶段&#xff0c;设备的数据传输共享同一物理介质&#xff0c;就如同多辆车需要共用一条单车道上通行。当多个设备同时尝试传输数据时&#xff0c;数据信号就会彼此竞争、干扰&#xf…...

编程新知 2026/4/8 2:05:34

别让ChatGPT变成你的安全漏洞：OWASP LLM Top 10（2024）实战避坑指南

别让ChatGPT变成你的安全漏洞&#xff1a;OWASP LLM Top 10&#xff08;2024&#xff09;实战避坑指南 当大型语言模型&#xff08;LLM&#xff09;从实验室走向企业级应用时&#xff0c;安全风险正以指数级速度增长。2023年某金融科技公司因提示词注入导致百万用户数据泄露的案…...

编程新知 2026/4/8 1:16:34

基于S7-200 PLC和组态王矿井通风控制

基于S7-200 PLC和组态王矿井通风控制矿井通风系统的自动化控制对安全生产太重要了。老张上次下井巡检时说&#xff1a;"现在这通风系统比二十年前强多了&#xff0c;以前手动调风门得拿命赌操作工的手速。"今天咱们就聊聊怎么用S7-200 PLC和组态王搞矿井通风控制&…...

编程新知 2026/4/8 1:04:19