js 右键菜单

Posted 2020-10-10 面朝阳光/

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 右键菜单相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页右键菜单</title>
<!-- 
思路：
1.写出右键点击事件；
2.写出菜单功能；
3.关联右键功能和菜单，学习使用定位
-->
<style>
#test {
    width:200px;
    height:200px;
    background-color:green;
}

ul.context-menu {
    padding:0;
    margin:0;
    display:none;
    position:absolute; /*只能是absolute或fixed*/
}

ul.context-menu li {
    list-style:none;
    width:100px;
    height:20px;
    line-height:20px;
    text-align:center;
    border:solid 1px;
    background-color:#CCC;
    display:block;
}

ul.context-menu li:hover {
    background-color:#C0C0C0;
    cursor:context-menu;
}
</style>
<script>
//var t = document.getElementById("test");
window.onload = function(){
    var clicked_ele;//全局变量，用于记录被右键单击呼出菜单的元素
    
    //去掉默认的contextmenu事件，否则会和右键事件同时出现。
    document.getElementById("test").oncontextmenu = function(e){
        e.preventDefault();
    };
    
    document.getElementById("ct").oncontextmenu = function(e){
        e.preventDefault();
    };
    document.getElementById("test").onmousedown = function(e){
        if(e.button ==2){//右键
            var x = e.clientX;//获取鼠标单击点的X坐标
            var y = e.clientY;//获取鼠标单击点的Y坐标
            //设置菜单的位置
            document.getElementById("ct").style.left = x + "px";
            document.getElementById("ct").style.top = y + "px";
            document.getElementById("ct").style.display = "block";
            clicked_ele = this;
        }else if(e.button ==0){ //左键
            document.getElementById("ct").style.display = "none";
        }else if(e.button ==1){ //按下滚轮
            document.getElementById("ct").style.display = "none";
        }
    }
    document.getElementById("test").onblur = function(e){
        document.getElementById("ct").style.display = "none";
    }
    //给每个菜单项添加事件处理
    var items = document.getElementsByClassName("context-menu-item");
    for(var i=0; i < items.length; i++){
        //在定义onclick事件之前，c必须设置取消test元素的onblur事件，否则onclick事件失效，因为click先触发的是test元素的onblur事件，该事件有移除菜单的操作，才会导致后面的代码失效
        items.item(i).onmouseover = function(e){
            document.getElementById("test").onblur = undefined;
        }
        //鼠标移出菜单时，还是要将test的onblur事件还原
        items.item(i).onmouseleave = function(e){
            document.getElementById("test").onblur = function(e){
                document.getElementById("ct").style.display = "none";
            }
        }
        
        items.item(i).onclick = function(e){
            e.stopPropagation();//为避免引起其它错误，阻止冒泡很重要
            console.log(this.innerHTML + ":" + clicked_ele.innerHTML);
            document.getElementById("ct").style.display = "none";
        }
    }
}

</script>
</head>

<body>
<ul class="context-menu" id="ct">
<li class="context-menu-item">option1</li>
<li class="context-menu-item">option2</li>
<li class="context-menu-item">option3</li>
</ul>

<div id="test" tabindex="2">我是美腻大方的绿方块</div>
</body>
</html>

以上是关于js 右键菜单的主要内容，如果未能解决你的问题，请参考以下文章

用JS自制表格软件玩数据8. 设计单元格中的右键菜单