右键点击事件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul, ul li{
            list-style:none;
        }
        #list{
            width:80px;
            border:1px solid #ccc;
            box-shadow:2px 2px 2px #ccc;
            display:none;
            position: absolute;
        }
        #list li{
            border-bottom:1px solid #ccc;
            height:24px;
            line-height:24px;
            text-align:center;
            cursor: pointer;
        }
        #list li:last-child{
            border-bottom:none;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>查看</li>
        <li>删除</li>
        <li>复制</li>
        <li>粘贴</li>
    </ul>

    <script>
        var list = document.getElementById('list');
        /*
            1.阻止默认事件
            2.添加自己的事件，自定义菜单
        */
        // 右键事件 oncontextmenu
        document.oncontextmenu = function(ev){
            var eve = event || ev;
            eve.preventDefault();  // 阻止默认行为
            list.style.display = 'block';
            list.style.left = eve.clientX + 'px';
            list.style.top = eve.clientY + 'px';
        }

        // 左键事件
        document.onclick = function(){
            list.style.display = 'none';
        }
    </script>
</body>
</html>

 

效果

posted @ 2020-07-09 20:16  石海莹  阅读(461)  评论(0)  编辑  收藏  举报