三分钟了解在div里自定义右击菜单搭建与阻止浏览器默认事件

一.div里自定义右击菜单搭建。

在许多项目或者练习当中我们会遇到自定义右击菜单的要求，这个时候我们就要知道自定义菜单的做法以及原理。

右击需要用到的知识点： oncontextmenu 事件 在元素中用户右击鼠标时触发并打开上下文菜单。

首先我们画一个id为demo的div并设置样式。

其次在id为demo的div里用oncontextmenu 事件，并且阻止浏览器的默认事件

demo.oncontextmenu = function (e) {
e.preventDefault();//阻止浏览器的默认事件
}

此时我再右击id为demo时 菜单已经不生效了，接下来要做的就是自己建立一个菜单。我们 这里还是先用div简单搭建一下。

demo.oncontextmenu = function (e) {
            e.preventDefault();//阻止浏览器 默认事件
            let menu = document.querySelector('.menu')
            if (menu) menu.remove()//判断如果menu已经存在就先移除
            menu = document.createElement('div')//生成一个div
            menu.classList.add('menu')//给div添加一个类名
            document.body.appendChild(menu)//添加子节点
            menu.style.left = e.pageX + 'px'//给div右上角定位在鼠标处
            menu.style.top = e.pageY + 'px'//给div右上角定位在鼠标处
        }

最后我们给menu添加样式 这里就简单写一下：

.menu {
width: 100px;
height: 150px;
background: slateblue;
position: absolute;
}

这样我们自定义右击菜单 简单模型已经搭建完毕。