桌面 html 自定义,【极简壁纸 - 技术分享】html js自定义右键菜单方法_文都网校的博客-程序员宅基地

技术标签: 桌面 html 自定义  

9e9ed541689f

自定义右键菜单

极简壁纸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来获取到右击的目标的元素,从而实现不同元素不同右键菜单

目标1右击出现右键菜单1
目标2右击出现右键菜单2
  • 下载
  • 删除
  • 移动到...
  • 重命名
  • 查看
  • 关于
  • 刷新
  • 反馈

// 先用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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42300194/article/details/117738703

智能推荐

Typecho双栏博客免费主题—Splity_eyunyu的博客-程序员宅基地

介绍:自适应设计支持夜间模式支持备份/恢复模板设置幻灯片的设置熊掌号和统计代码的设置站内广告的设置文章类型设置:大图,单图,三图显示小灯泡另外一款收费主题也很nice:typecho强大的自媒体博客主题-Spimes网盘下载地址:http://kekewl.cc/3kguDZ4szRx0图片:...

四十二、python学习之Django框架(二):类视图与中间件_浅弋、璃鱼的博客-程序员宅基地

五、类视图:1.类视图引入:以函数的方式定义的视图成为函数视图,即我们常说的视图函数.但是,视图函数遭遇不同的请求方法(如get和post),并且需要做不同的处理时,我们如果在一个函数中编写不同的业务逻辑,代码可读性和复用性都不好.例如:我们创建一个新的子应用:demoviewpython manage.py startapp demoview在demoview中配置路由...

上网速度很慢的若干原因_cracker_love的博客-程序员宅基地

1.网卡绑定的协议太多。 上网速度慢,在局域网用户中很常见,原因是网卡绑定的协议太多。网卡上如果绑定了许多协议,当数据通过网卡时,计算机就要花费很多时间来确定这个数据使用哪种协议来传送,这时用户就会感觉上网慢。解决方法是:让一块网卡只运行PPPOE协议来连接ADSL,提供上网的外部连接,另一块网卡运行局域网的其他协议,从而各尽其职提高性能,这样客户端上网速度就会改善。 2.ADSL设备散热不良。

linux下安装libnfc实践_RTFF的博客-程序员宅基地

【准备】linux操作系统,libnfc-1.7.1,libusb-1.0.21,libusb-compat-0.1.4【编译】1.编译libusb-1.0.21:进入libusb-1.0.21目录,./configure配置,make编译,make install安装2*.拷贝libusb-1.0.pc

Linux终止进程_刘静飞的博客-程序员宅基地

7.终止进程的运行问题1)运行“sleep 600”命令2)再开一个终端,查出sleep程序的PID并杀死3)运行多个xsnow程序并都放入后台4)杀死所有xsnow进程5)su切换为zhangsan用户6)再开一个终端,强制踢出zhangsan用户方案杀死进程的命令一般有kill、killall、pkill。kill:只能针对PID来进行查杀。killall:可以针对进...

贪心算法------LeetCode 321拼接最大数_Zzzzx_的博客-程序员宅基地

Leetcode 321.拼接最大数题目描述分析输入数据的运行步骤如何选取最大子序列如何对数组进行归并形成新数主函数题目描述给定长度分别为 m 和 n 的两个数组,其元素由 0-9 构成,表示两个自然数各位上的数字。现在从这两个数组中选出 k (k <= m + n) 个数字拼接成一个新的数,要求从同一个数组中取出的数字保持其在原数组中的相对顺序。求满足该条件的最大数。结果返回一个表示该最大数的长度为 k 的数组。来源:力扣(LeetCode)链接:https://leetcode-cn

随便推点

寻找矩阵中的马鞍点_Storm-Shadow的博客-程序员宅基地

原题:若在矩阵A[n*n]中存在一个元素a[i-1][j-1]满足a[i-1][j-1]是第 i 行元素中最小且又是第 j 列元素中的最大值,则称此元素为该矩阵的一个马鞍点.试设计一个求矩阵所有马鞍点的算法.分析:用数组S[n]存储某一行(如第 i 行, i = 1--m)的元素值最小的元素的下标, c 表示此行的元素值等于最小的元素的个数(元素等于最小值的元素可能不止一个),对每个元素值最小

Ubuntu为安装的软件添加启动图标_Geroff的博客-程序员宅基地_ubuntu 应用图标

要给软件添加启动图标,可到/usr/share/applications目录下创建相应的配置文件,以下为给eclipse配置启动图标示例: 命令行进入/usr/share/applications目录cd /usr/share/applications执行sudo vim eclipse.desktop添加如下内容[Desktop Entry]Name=eclipseName[zh_CN]=e

光照类型_mode_abc的博客-程序员宅基地

原文链接:光照类型Point lightsSpot lightsDirectional lightsArea lightsEmissive materialsAmbient lightPoint lightsPoint light从场景空间中的一个点向所有方向均匀发出光线。照射到物体表面的光线方向为接触点和light object中心的连线。光发出后强度随着...

UVa 10878 Decode the tape_我叫空格_的博客-程序员宅基地

题目很简单,代码也很短。第一遍做的时候

SEED信息安全实验系列:缓冲区溢出漏洞实验_weixin_34107739的博客-程序员宅基地

缓冲区溢出漏洞实验本实验详细出自http://www.shiyanlou.com/courses/231,转载请注明出处。一、实验描述缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况。这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段。这一漏洞的出现是由于数据缓冲器和返回地址的暂时关闭,溢出会引起返回地址被重写。二、实验准备本次实验为了方便观察...