【web】自定义浏览器鼠标右键菜单 |
您所在的位置：网站首页 › 浏览器右键不显示内容 › 【web】自定义浏览器鼠标右键菜单 |
【web】自定义浏览器鼠标右键菜单
|
我们电脑桌面，文件夹或者浏览器等等一些地方，鼠标左键功能都一样，鼠标右键各有各的功能，都对应各自功能需求而定制的菜单；所以我们也可以定制自己的个性右键菜单，让菜单更美观，更有个性。 这里就写出浏览器如何自定义菜单（电脑桌面的呢，抱歉超出了我能力范围了） 定制菜单如下：
主要事件： oncontextmenu()：在元素中用户右击鼠标时触发并打开上下文菜单。 注意兼容： 所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。 window.onload = function () { // 获取节点 var menu = document.getElementById('menu'); //获取可视区宽度,高度 var winWidth = document.documentElement.clientWidth || document.body.clientWidth; var winHeight = document.documentElement.clientHeight || document.body.clientHeight; // 点击空白区域 隐藏菜单 document.addEventListener('click', function () { menu.style.display = 'none'; menu.style.left = 0 + 'px'; menu.style.top = 0 + 'px'; }) // 点击菜单 menu.addEventListener('click', function (e) { var e = e || window.event; console.log(e.target.innerText) }) //右键菜单 document.oncontextmenu = function (e) { var e = e || window.event; menu.style.display = 'block'; // 获取鼠标坐标 var mouseX = e.clientX; var mouseY = e.clientY; // 判断边界值，防止菜单栏溢出可视窗口 if (mouseX >= (winWidth - menu.offsetWidth)) { mouseX = winWidth - menu.offsetWidth; } else { mouseX = mouseX } if (mouseY > winHeight - menu.offsetHeight) { mouseY = winHeight - menu.offsetHeight; } else { mouseY = mouseY; } menu.style.left = mouseX + 'px'; menu.style.top = mouseY + 'px'; return false; } } |
样式的话，因人而异，你们随意发挥了【本文地址】
今日新闻 |
推荐新闻 |