加强自定义菜单即更换浏览器默认右击菜单栏

本文简单介绍了如何更换浏览器的默认右击菜单栏

在页面的任意位置点击右键，自定义的菜单都会跟随鼠标的点击位置来显示出来

效果图：

话不多说，直接上代码！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加强自定义菜单</title><style>* {padding: 0;margin: 0;}ul {width: 230px;background-color: rgb(255, 255, 255);position: fixed;left: 100px;top: 100px;border: 1px solid rgb(105, 105, 105);padding-top: 10px;text-indent: 10px;list-style: none;display: none;}li{margin-bottom: 13px;color: #000;font: 800 16px/26px "宋体";border-bottom: 1px solid #ccc;}li:last-child{border-bottom: none;margin-bottom: 0;padding-bottom: 5px;}li:hover{background-color: rgb(69, 255, 193);box-shadow: 0px 0px 26px 0px rgb(69, 255, 193);}ul li:first-child:hover{background-color: rgb(91, 230, 255);box-shadow: 0px 0px 26px 0px rgb(91, 230, 255);}</style>
</head><body><!-- 2. 加强自定义菜单【√】·单击鼠标右键的时候弹出自定义菜单(修身，齐家，治国，平天下)·菜单项有点击时log一下菜单名称，之后菜单消失·鼠标滑过哪个菜单项哪个菜单项高亮 --><ul><li id="Refresh">刷新(F5)</li><li>修身(s)</li><li>齐家(q)</li><li>治国(z)</li><li>平天下(p)</li></ul><script>var ul = document.querySelector("ul")var lis = document.querySelectorAll("li")var F5 = document.getElementById("Refresh")// var Rclick = document.oncontextmenu()// 阻止浏览器的右键弹出列表的默认行为document.addEventListener("contextmenu",function(e){e.preventDefault()ul.style.display = "block"ul.style.left = e.pageX + "px"ul.style.top = e.pageY + "px"})// 实现点击li菜单项时log一下菜单名称，及鼠标滑过哪个菜单项哪个菜单项高亮ul.addEventListener("click",function(e){if(e.target.nodeName === "LI"){console.log(e.target.innerText);ul.style.display = "none"}})// 实现刷新按钮F5.addEventListener("click",function(e){window.location.reload()})// 单击页面的任意位置关闭uldocument.addEventListener("click",(e)=>{ul.style.display = "none"})</script>
</body></html>

加强自定义菜单即更换浏览器默认右击菜单栏相关推荐

android使用系统字体文件,Android 自定义字体，更换系统默认显示的字体使用自定义字体...
序言: 1.指定控件显示指定字体有时为了美化UI,需要在指定控件中显示特定的字体,而这个字体在Android系统中却没有,此时可将需要的字体文件存放在assets文件夹中,在为控件设置Typefac ...
html如何改变浏览器的图标,css 更换浏览器默认图标
boost muti-thread 背景 • 今天互联网应用服务程序普遍使用多线程来提高与多客户链接时的效率:为了达到最大的吞吐量,事务服务器在单独的线程上运行服务程序: GUI应用程序将 ...
android自带中文字体,Android更换系统默认显示的字体使用自定义字体
序言上一篇Android 自定义字体,更换系统默认显示的字体使用自定义字体有讲到怎样指定控件显示指定字体,怎样整个软件显示指定字体,怎样WebView加载指定字体,但是还留下一个怎样修改整个系统的默 ...
Element 组件之右键鼠标自定义菜单
参考链接: Element 组件之右键鼠标自定义菜单 Vue+ElementUI实现给Tab页添加鼠标右键菜单栏 Element tree组件之自定义菜单基于element tree组件.效果 ...
微信公众平台开发（58）自定义菜单
微信公众平台开发微信公众平台开发模式企业微信公众平台自定义菜单开发教程作者:方倍工作室地址:http://www.cnblogs.com/txw1958/p/weixin-58-cus ...
【BC】如何将自定义的区域菜单添加到系统默认的菜单中
在SAP应用中,不同的公司往往会根据自身的需求开发很多报表或者功能页面,同样也会对这些客制化开发的功能进行分类,并且这些分类菜单是能够被所有用户读取的.在SAP Easy Access中所显示的系统菜 ...
自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]
许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单首先来创建JSP页面 1 <%@ page language ...
html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件，实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
墨迹天气php,Android_仿墨迹天气在Android App中实现自定义zip皮肤更换，在这里谈一下墨迹天气的换肤 - phpStudy...
仿墨迹天气在Android App中实现自定义zip皮肤更换在这里谈一下墨迹天气的换肤实现方式,不过首先声明我只是通过反编译以及参考了一些网上其他资料的方式推测出的换肤原理, 在这里只供参考. 若大 ...
浏览器默认打开网页设置不成功
浏览器默认打开网页设置不成功很多时候,因为我们安装了一些软件,导致我们经常用的比如谷歌.Edge.火狐.Opera等浏览器的主页被篡改,即使在设置里面的"启动时"选项下设置了 ...

加强自定义菜单即更换浏览器默认右击菜单栏

加强自定义菜单即更换浏览器默认右击菜单栏相关推荐

最新文章

热门文章

加强自定义菜单 即更换浏览器默认右击菜单栏

加强自定义菜单 即更换浏览器默认右击菜单栏相关推荐

最新文章

热门文章

加强自定义菜单即更换浏览器默认右击菜单栏

加强自定义菜单即更换浏览器默认右击菜单栏相关推荐