原生js实现自定义右键菜单进行颜色切换

最新推荐文章于 2021-10-12 15:08:09 发布

原创最新推荐文章于 2021-10-12 15:08:09 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #右键自定义菜单

前后端相关学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript实现自定义右键菜单并进行颜色切换的方法。通过2重闭包来管理菜单的显示与隐藏，菜单效果类似于导航栏的下拉框。提供了一个简单的代码实例，包括HTML、CSS和JavaScript部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单来说就是js中用了个2重闭包，至于菜单，和导航栏的下拉框一样，不用时隐藏，使用时显示。

直接上代码了，比较简单。

效果图：

效果图

html:

<!DOCTYPE html>
<html>
<head>
	<title>practice</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="test13.css">
</head>
<body>
	<div id="container" class="center-spacearound" style="flex-wrap: wrap;">
		<div class="box center-all">右键改变颜色</div>
		<div class="box center-all">右键改变颜色</div>
		<div class="box center-all">右键改变颜色</div>
		<div class="box center-all">右键改变颜色</div>
		<ul class="rightmenu">
            <li class="center-all rightmenu-li" style="background-color: green;">绿色</li>
            <li class="center-all rightmenu-li" style="background-color: blue;">蓝色</li>
            <li class="center-all rightmenu-li" style="background-color: pink;">粉色</li>
            <li class="center-all rightmenu-li" style="background-color: brown;">棕色</li>
        </ul>
	</div>
	<script type="text/javascript" src="test13.js"></script>
</body>
</html>

css:

/*------------------------公共样式表----------------------------*/
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
.center-spacearound {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.center-all {
    display: flex;
    align-items: center;
    justify-content: center;
}
/*------------------------功能样式表----------------------------*/
#container {
    width: 900px;
    height: 300px;
    margin: 15px auto;
    background-color: yellow;
    border-radius: 15px;
    z-index: 0;
}
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    color: white;
    font-size: 26px;
    cursor: pointer;
    z-index: 1;
}
.rightmenu {
    display: none;
    position: absolute;
    /*margin-top: 109px;*/
    z-index: 2;
    cursor: pointer;
}
.rightmenu-li {
    width: 154px;
    height: 41px;
    border-bottom: 1px solid #DDDDDD;
    color: white;
}

js:

var namelist = ["green", "blue", "pink", "brown"];
var boxitem = document.getElementsByClassName("box");
var rightmenu = document.getElementsByClassName("rightmenu");
var rightli = document.getElementsByClassName("rightmenu-li");
for (var i = 0; i < boxitem.length; i++) {
	(function(i){
	    boxitem[i].oncontextmenu = function(obj) {
		    if (!obj) obj = event || window.event;
		    if (obj.button==2) {
			    obj.preventDefault();
		    	// console.log(obj.clientX);
		    	// console.log(obj.clientY);
		    	rightmenu[0].style.display = "block";
		    	rightmenu[0].style.left = obj.clientX + "px";
		    	rightmenu[0].style.top = obj.clientY + "px";
		    	for (var j = 0; j < rightli.length; j++) {
		    		(function(j){
						rightli[j].onclick = function() {
							boxitem[i].style.backgroundColor = namelist[j];
						}
					})(j)
		    	}
		    }
		}
	})(i)
}
window.onclick = function() {
	rightmenu[0].style.display = "none";
}