自定义右键菜单
极简壁纸2.0 地址: 目前进度已开发到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 地址:
