14.右键菜单

最新推荐文章于 2025-07-25 22:23:48 发布

原创最新推荐文章于 2025-07-25 22:23:48 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

DOM 专栏收录该内容

16 篇文章

订阅专栏

右键菜单，顾名思义，当鼠标右键时，弹出一个菜单，而且应该是鼠标在哪点，哪出现菜单才对，最后当鼠标点击别处时，菜单消失。这个效果需要我们掌握什么知识点呢？

####常见事件本例中着重用到oncontextmenu 当弹出右键菜单时发生
####鼠标距离左面的距离e.clientX ,而且这个值是不带单位的，如果定位的话，一定要加上字符串拼接 + “px”
####浏览器默认情况下，右键也会弹出菜单，所以，要知道阻止浏览器默认行为的语句 return false；
####e的兼容性，e= e|| window.event;

var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(){
        oUl1.style.display = "block";
        return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
    }

但此时位置不对，应该是鼠标点哪，哪出现菜单，给ul绝对定位，不能是relative，因为relative空间不释放，我们必须要求他释放空间，脱离文档流才行

<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";
         return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
    }
</script>

差点忘了e的兼容性

<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        e = e || window.event;
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";

        return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
    }

此时应该考虑，当菜单栏出现后，鼠标按别的地方，菜单栏应该消失

<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        e = e || window.event;
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";
      return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
    }
    document.onclick = function(){
        oUl1.style.display = "none";
    }
</script>

到此为止，基本的右键菜单就完成了，如果你还想加点啥，譬如说，点击菜单中每个选项的时候，弹出每个选项的内容

所以用this

so.加了输出每项内容的右键菜单栏的全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style : none;
        }
        #ul1{
            width: 100px;
            border: 1px solid #ff0000;
            border-radius:5px;
            padding: 5px 0;
            display: none;
            position:absolute;
        }
        #ul1 li{
            height: 24px;
            line-height：24px;
            text-align:center;
            color:#555;
            font-size:12px;
        }
        #ul1 li:hover{
            background: #00ff00;
        }
    </style>
</head>
<body>
<ul id="ul1">

    <li>二哈</li>
    <li>金毛</li>
    <li>泰迪</li>
    <li>萨摩</li>
</ul>
<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        e = e || window.event;
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";
        return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
    }
    document.onclick = function(){
        oUl1.style.display = "none";
    }
    var aLi = oUl1.getElementsByTagName("li");
    for(var i=0; i< aLi.length;i++){
        aLi[i].onclick = function(){
            console.log(this.innerHTML);
        }
    }

</script>
</body>
</html>