JS学习-自定义右键菜单

  • 主要知识点：通过注册oncontextmenu事件重写菜单

html+css实现简易的菜单

<html>
	<head>
		<style>
        	html, body {
            	width: 100%;
            	height: 100%;
            	margin: 0;
            	padding: 0;
        	}
        	.box {
           		background-color: antiquewhite;
            	border: 1px solid #fae567;
            	width: 700px;
            	height: 500px;
        	}
        	/* 自定义右键菜单 */
        	#custom-menu {
            	display: none;
            	position: absolute;
            	width: 150px;
            	border: 1px solid #ccc;
            	background: #eee;
        	}
        	#mecustom-menunu ul {
            	margin: 5px 0;
        	}
        	ul {
            	padding-left: 0;
        	}
        	#custom-menu li {
            	height: 30px;
            	line-height: 30px;
            	color: #21232E;
            	font-size: 12px;
            	text-align: center;
            	cursor: default;
            	list-style-type: none;
            	border-bottom: 1px dashed #cecece;
        	}
        	#custom-menu li:hover {
            	background-color: #cccccc;
        	}
    	</style>
	</head>
	<body>
    	<div class="box">
        	<!-- 自定义鼠标右键菜单 -->
        	<div id="custom-menu">
            	<ul>
                	<li onclick="menuClick(1)">清除缓存</li>
                	<li onclick="menuClick(2)">重新加载</li>
                	<li onclick="menuClick(3)">开通VIP</li>
                	<li onclick="menuClick(4)">赞赏作者</li>
                	<li onclick="menuClick(5)">喵喵喵喵</li>
            	</ul>
        	</div>
    	</div>
	</body>
</html>

js实现自定义菜单的呼出/隐藏

  • 这里实现整个body的右键菜单监听

    // 自定义鼠标右键菜单栏
document.documentElement.oncontextmenu = function(e) { // 自定义body元素的鼠标事件处理函数
	var e = e || window.event;
	// e.preventDefault(); //阻止系统右键菜单,这里测试了不会生效，只能通过return false 阻止
    // 显示自定义的菜单调整位置
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0; // 获取垂直滚动条位置
	let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0; // 获取水平滚动条位置
	let _menu = document.querySelector('#custom-menu');
	// console.log(_menu);
	_menu.style.display = 'block';
	_menu.style.left = e.clientX + scrollLeft + 'px';
	_menu.style.top = e.clientY + scrollTop + 'px';
	return false;  //阻止系统右键菜单
}
// 鼠标点击其他位置时隐藏菜单
document.onclick = function() {
	let _menu = document.querySelector('#custom-menu');
	// console.log(_menu);
	_menu.style.display = 'none';
}
var menuClick = function(m) {
	if (m == "1") {
		alert("清除缓存成功")
	} else if (m == "2") {
		alert("重新加载成功")
	} else if (m == "3") {
		alert("暂未开通")
	} else if (m == "4") {
		alert("暂未开通")
	} else if (m == "5") {
		alert("暂未开通");
	}
}

  • 如果想实现局部替换右键菜单可以通过

    document.querySelector('.box').oncontextmenu = function(e) { 
	// More Code...
}

参考文章： https://www.jb51.net/article/257143.htm

posted @   ~LemonWater  阅读(800)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· VUE学习-监听事件
· VUE学习-自定义指令
· 写一个方法实现自定义右键菜单的功能
· javascript右键菜单
· JS 右键菜单
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示