自定义右键菜单

极简壁纸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