自定义oncontextmenu[通俗易懂]

全栈程序员-站长 • 2022年8月14日上午8:46 • 未分类 • 阅读 10

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
*{margin:0;padding:0;list-style:none;}
#menu1{display:none; position:absolute;left:0;top:0;width:100px; border:1px solid #000; overflow:hidden;}

#menu1 li{width:100%; height:30px; line-height:30px; text-align:center; background:#ccc; border-bottom:1px solid #000;}
#menu1 li:hover{ background:#c00; color:#fff;}
#ul1 li{
    
    float:left;width:200px; height:30px; line-height:30px; text-align:center; background:#ccc; border:1px solid #000; margin:10px;}

</style>
<script>


window.onload = function(){
    var oUlMenu = document.getElementById("menu1");
    var aMLi = oUlMenu.children;
    var oUl = document.getElementById("ul1");
    var aLi = oUl.children;
    
    var currentLi = null;
    for(var i = 0; i < aLi.length; i++){
        aLi[i].oncontextmenu = function(ev){
            currentLi = this;
            var oEvent = ev || event;
            oUlMenu.style.display = "block";
            oUlMenu.style.left = oEvent.clientX + "px";
            oUlMenu.style.top = oEvent.clientY + "px"
            return false;//禁止默认的鼠标右击出现选项弹窗，和oncontextmenu配合使用
        };
    }
    
    aMLi[0].onclick = function(){
        currentLi.parentNode.removeChild(currentLi);
        oUlMenu.style.display = "none";    
    };
    
    aMLi[1].onclick = function(){
        currentLi.style.background = "red";
        oUlMenu.style.display = "none";    
    };
    aMLi[2].onclick = function(){
        currentLi.style.background = "green";
        oUlMenu.style.display = "none";    
    };
    
};


</script>
</head>

<body>

<ul id="menu1">
    <li>删除</li>
    <li>变红</li>
    <li>变绿</li>
</ul>

<ul id="ul1">
    <li>00000000000000000</li>
    <li>11111111111111</li>
    <li>22222222222222</li>
    <li>3333333333333</li>
    <li>4444444444444</li>
</ul>
</body>
</html>