桌面 html 自定义,【极简壁纸 - 技术分享】html js自定义右键菜单方法_文都网校的博客-程序员宅基地
技术标签： 桌面 html 自定义
自定义右键菜单
极简壁纸2.0 地址: https://bz.zzzmh.cn 目前进度已开发到95%
近期有时间就会分享一下，我在开发过程中用到的一些小技术的简单用法和demo
关于html js右键菜单
原理非常简单，监听鼠标右键事件，在事件中执行ev.preventDefault()就可以屏蔽原本的浏览器默认右键菜单，代码如下。
window.oncontextmenu = function (ev) {
ev.preventDefault();
}
然后从鼠标当前位置，画一个自定义的右键菜单div，就可以实现一个简单的自定义右键菜单了。
- 下载
- 删除
- 移动到...
- 重命名
// 先用e兼容不同浏览器
let e = ev || event
/阻止默认行为
e.preventDefault();
//记录当前的坐标(x轴和y轴)
let x = e.clientX;
let y = e.clientY;
// 显示邮件菜单
let menu = document.querySelector('#list');
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.style.display = 'block';
百度到的例子就是这些，后面我再说补充下我的改进
默认右键菜单是出现在鼠标所在位置的右下方，但是右下方的空间不一定足够显示右键菜单，如果右边不够自动转成左边，下面不够转上面，这部分代码如下。
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
if (e.clientY > 40) {
if (clientHeight - e.pageY >= menu.offsetHeight) {
menu.style.top = e.pageY + 'px';
} else {
menu.style.top = (e.pageY - menu.offsetHeight) + 'px';
}
if (clientWidth - e.pageX >= menu.offsetWidth) {
menu.style.left = e.pageX + 'px';
} else {
menu.style.left = (e.pageX - menu.offsetWidth) + 'px';
}
menu.style.display = 'block';
}
可以通过ev.target来获取到右击的目标的元素，从而实现不同元素不同右键菜单
- 下载
- 删除
- 移动到...
- 重命名
- 查看
- 关于
- 刷新
- 反馈
// 先用e兼容不同浏览器
let e = ev || event
// 判断data-type参数来获取不同的右键菜单用于显示
if (e.target && e.target.getAttribute('data-type') == 'target1') {
menu = document.querySelector('#list1');
} else if (e.target && e.target.getAttribute('data-type') == 'target2') {
menu = document.querySelector('#list2');
}
任意鼠标点击事件都要隐藏掉正在显示中的右键菜单，否则用户不选择菜单内容，而是继续操作其他区域的话，菜单会一直悬浮在那边。
window.onclick = function () {
menu.style.display = 'none';//再次点击时隐藏菜单框
}
END
目前就是这些，之后还会分享一些开发极简壁纸时学到的技术。
也欢迎访问极简壁纸2.0 地址: https://bz.zzzmh.cn
智能推荐
做人留底牌，做事出王炸！_程序员小乐的博客-程序员宅基地
点击上方 "程序员小乐"关注,星标或置顶一起成长每天凌晨00点00分,第一时间与你相约每日英文Life is like a cup of tea. It won..._程序员的底牌
解决VScode提示： 无法将“node”“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。_蒙娜丽莎的Java的博客-程序员宅基地
解决VScode提示： 无法将“node”“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。最后发现！！新建一个终端就好了安装node成功之后在cmd中能够正常运行，但是在vscode里一直提示无法识别，尝试了网上的各种方法：改成管理员运行改成管理员启动方法见这里添加环境变量修改环境变量见这里重启重新安装最后发现！！新建一个终端就好了点图上CMD旁边那个+号就可以啦！！搞了好久，最后还是师姐帮
python写的ROS激光雷达扇形滤波_雷达数据滤波器ros_skyrim_H的博客-程序员宅基地
python写的ROS激光雷达扇形滤波项目中想要实现针对机器人正前方N°的区域有障碍时，对机器人进行速度限制，于是自己做了一个激光雷达的扇形滤波。思路就是获取/scan话题，将话题数据中的最大和最小角度设置为自己想要的扇区，需要注意的是，LaserScan一般默认的坐标系与机器人方向相反，A1雷达的背面是laser坐标系的正方向——0°角位置在使用python时，发现LaserScan的r..._雷达数据滤波器ros
模块 14 - 15：网络应用通信考试_tcp/ip 封装过程中如何使用端口号?_一个很菜的小猪的博客-程序员宅基地
1、OSI 模型的哪三层提供类似于 TCP/IP 模型的应用层提供的网络服务？（请选择三项。）2、下列哪种场景描述了传输层提供的功能？3、与 Web 服务器通信的 PC 在发送数据时使用 6000 字节的 TCP 窗口大小和 1500 字节的数据包大小。当 Web 服务器收到来自 PC 的两个数据包后，它会确认哪个字节的信息?4、OSI 哪一层为用于通信的应用程序和用于消息传输的底层网络提供接口？5、对等网络模型的关键特征是什么？6、在什么样的网络模型中使用 eDonKey、eMule、BitTorrent_tcp/ip 封装过程中如何使用端口号?
pycharm报错：AttributeError: module ‘torch._C‘ has no attribute ‘_cuda_setDevice‘_pytorch 无法加载torch._c_ALAN有点甜的博客-程序员宅基地
原因：pytorch没有配置GPU/CUDA（若已经安装并配置GPU+CUDA）到pytorch官网安装适合的版本：https://pytorch.org/get-started/locally/将最底层的 Run this Command复制，到pycharm的终端运行。_pytorch 无法加载torch._c
【Java】高并发-JUC:ReentrantLock重入锁_juc 并发锁 reentrlock_Learn Forever的博客-程序员宅基地
【Java】高并发-JUC:ReentrantLock重入锁_juc 并发锁 reentrlock
随便推点
android 中ids.xml资源的使用_caiwenfeng_for_23的博客-程序员宅基地
前面我们见识过ids.xml文件，但是这个文件是什么意思呢？我们来看下文档中的介绍：先看下它给的例子：XML file saved at res/values/ids.xml:使用方式： 一： android:id="@id/button_ok"二：Button btn=new Button(context); btn
密码算法详解——AES_圆月弯刀丶的博客-程序员宅基地
0 AES简介 我们知道数据加密标准（Data Encryption Standard: DES）的密钥长度是56比特，因此算法的理论安全强度是256。但二十世纪中后期正是计算机飞速发展的阶段，元器件制造工艺的进步使得计算机的处理能力越来越强，DES将不能提供足够的安全性。1997年1月2号，美国国家标准技术研究所（National Institute of Standards an...
详解Python模块导入方法_python mypath.pth_antwarrior的博客-程序员宅基地
python常被昵称为胶水语言，它能很轻松的把用其他语言制作的各种模块（尤其是C/C++）轻松联结在一起。python包含子目录中的模块方法比较简单，关键是能够在sys.path里面找到通向模块文件的路径。下面将具体介绍几种常用情况:（1）主程序与模块程序在同一目录下:如下面程序结构:`-- src |-- mod1.py `-- test1.py 若_python mypath.pth
在Python3中使用opencv绘制圆形和矩形都不显示，怎么回事？_cv2人脸看不到矩形-程序员宅基地
不行Circle绘图怎么回事？_cv2人脸看不到矩形
typescript(ts) 类型演算，类型推导_ts类型推导_twinkle||cll的博客-程序员宅基地
导言：我们都知道，ts 具有类型推导，并且可以很好的进行智能的类型推导。但是如果我们想要手动的来进行类型推导 —— 通过已知的类型来推断另一个类型，那么这个需要怎么做呢？关键字主要的关键字有以下几个： typeof,in, keyof 等关键字typeof关键字大家看到typeof, 肯定会说 js 中已经存在了哇，但是ts 中的typeof 有不一样的用法：这里ts 在 类型检查的时候报错，typeof 用在类型检查的位置。所以，在这里typeof的作用是：获取某个数据的类型, 上面的._ts类型推导
解决 ERROR Could not find a version that satisfies the requirement xxx 的问题_一个25岁的菜鸡的博客-程序员宅基地
解决 ERROR: Could not find a version that satisfies the requirement xxx 的问题今天自己在安装kaggle（其他包安装错误也是适用的）时，突然报了以下错误：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MONAGD5F-1653647530694)(C:\Users\Administrator.SC-201906191125\AppData\Roaming\Typora\typora-user-images