自定义oncontextmenu[通俗易懂]

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

转载于:https://www.cnblogs.com/heboliufengjie/p/4307181.html

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/170380.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

自定义oncontextmenu[通俗易懂]

相关推荐

macbook用什么记笔记_macbook怎么查看文件

搭建LAMP架构_redis搭建集群

java spel_SPEL表达式注入-入门篇

js实现模糊查询

SQL语句中创建表的语句_用sql创建表

java -jar 启动程序/设置classpath

发表回复