前言
右键菜单也算是前端页面中比较常见的功能了,今天我就带大家完整的实现右键菜单功能。
contextmenu事件
实现右键菜单我们需要用到 oncontextmenu
事件,oncontextmenu
事件会在用户右击鼠标时触发。
阻止原有菜单
首先,我们将其绑定到window
上:window.oncontextmenu
。
然后,通过event.preventDefault()
方法阻止掉原有的右键菜单,为我们绑定上新的功能做好准备工作。
window.oncontextmenu = function(e){
//取消默认的浏览器自带右键
e.preventDefault();
}
创建菜单
创建对应菜单的dom结构,并绑定上对应的功能函数:
<div id="menu" class="menu">
<div class="menu__item" onclick="log('1')">功能1</div>
<div class="menu__item" onclick="log('2')">功能2</div>
<div class="menu__item" onclick="log('3')">功能3</div>
<div class="menu__item">功能4 <span class="icon"> > </span>
<div id="submenu" class="submenu">
<div class="submenu__item" onclick="log('4-1')">功能4-1</div>
<div class="submenu__item" onclick="log('4-2')">功能4-2</div>
<div class="submenu__item" onclick="log('4-3')">功能4-3</div>
<div class="submenu__item" onclick="log('4-4')">功能4-4</div>
</div>
</div>
<div class="menu__item" onclick="log(5)">功能5</div>
</div>
当然,现在它还是固定的,不能移动。
菜单随鼠标联动
我们将菜单绝对定位,然后利用event的