美文网首页
js给页面元素添加自定义右键菜单

js给页面元素添加自定义右键菜单

作者: 时间走了光 | 来源:发表于2019-10-23 10:28 被阅读0次

给页面的某个区域添加右键菜单,代码如下:

// 禁用整个页面的所有浏览器默认右击事件
        document.oncontextmenu = function(){
            return false;
        }
        // 点击此div出现右键菜单
        let contextMenu = document.getElementsByClassName('app-tabs-main')[0]
        // 点击出现的菜单div
        let divCon = document.getElementsByClassName('context-menu-tab')[0];
        // 给div绑定右击事件
        contextMenu.addEventListener('contextmenu', function (event) {
            // 设置右键菜单显示
            divCon.style.display = 'block'
            // 设置右键菜单的展示位置
            divCon.style.left = event.clientX + 'px'
            divCon.style.top = event.clientY + 'px'
            // 添加页面的监听事件 - 点击页面任意一处菜单隐藏
            document.addEventListener('click', removeClickFun)
            // 隐藏掉右键菜单
            function removeClickFun () {
                // 隐藏菜单
                divCon.style.display = 'none';
                // 取消页面的监听
                document.removeEventListener('click', removeClickFun)
            }
        })

相关文章

网友评论

      本文标题:js给页面元素添加自定义右键菜单

      本文链接:https://www.haomeiwen.com/subject/inpcuctx.html