JS簡單實現自定義右鍵菜單

本文轉載自查看原文 2017-12-03 16:37 2339

用到的知識點： oncontextmenu(右鍵點擊事件,指用戶右擊鼠標時觸發並打開上下文菜單)
　　所以，我們要知道的就是，在觸發contextmenu事件時，取消默認行為(也就是阻止瀏覽器顯示自帶的菜單)
通過傳入的事件對象，來確定鼠標的點擊位置，作為left和top的值來進行元素的定位，並顯示自定義菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右鍵菜單</title>
    <style>
        /*清除reset css*/
        ul{
            padding:0;
            margin: 0;
            list-style: none;
        }
        /*main*/
        #list{
            width:160px;
            height:200px;
            border:1px solid #f4979a;
            box-shadow:0px 0px 5px #f4979a;
            display: none;
            /*一定要用絕對定位*/
            position: absolute;
        }
        #list li{
            height:50px;
            line-height:50px;
            font-size:16px;
            color:#ea6a66;
            text-align:center;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>下載</li>
        <li>刪除</li>
        <li>移動到...</li>
        <li>重命名</li>
    </ul>
</body>
    <!--js-->
    <script>


        //************獲取元素***********
        var listBox = document.getElementById('list');//獲取自定義右鍵菜單

        //鼠標右鍵點擊事件
        document.oncontextmenu = function(ev){
            //兼容性寫法示例：
            var ev = ev || event;//或（||）書寫順序有講究，不能隨意換

           //阻止默認行為
            ev.preventDefault();

            //記錄當前的坐標(x軸和y軸)
            var x = ev.clientX;
            var y = ev.clientY;

            listBox.style.display = 'block';//右鍵點擊時顯示菜單框
            listBox.style.left = x + 'px';
          　listBox.style.top = y + 'px';

　　　　　　　//關閉右鍵
            document.onclick = function(){
                listBox.style.display = 'none';//再次點擊時隱藏菜單框
            }
        }

    </script>
</html>

實例如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS簡單實現自定義右鍵菜單 JS簡單實現自定義右鍵菜單 js實現右鍵單擊打開自定義的菜單 js自定義鼠標右鍵菜單 js之自定義鼠標右鍵菜單 js contextmenu 自定義右鍵菜單 html鼠標自定義右鍵菜單：css+js實現自定義html右鍵菜單 JavaScript實現自定義右鍵菜單自定義右鍵菜單，禁用瀏覽器自帶的右鍵菜單[右鍵菜單實現--Demo] vue 右鍵菜單插件簡單、可擴展、樣式自定義的右鍵菜單