html自定义右键,自定义右键菜单html代码.html

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

/*css代码*/

#menu{

width: 0; /*设置为0 隐藏自定义菜单*/

height: 125px;

overflow: hidden; /*隐藏溢出的元素*/

box-shadow: 0 1px 1px #888,1px 0 1px #ccc;

position: absolute; /*自定义菜单相对与body元素进行定位*/

}

.menu{

width: 130px;

height: 25px;

line-height: 25px;

padding: 0 10px;

}

功能1

功能2

功能3

功能4

功能5

window.οncοntextmenu=function(e){

//取消默认的浏览器自带右键 很重要！！

e.preventDefault();

//获取我们自定义的右键菜单

var menu=document.querySelector("#menu");

//根据事件对象中鼠标点击的位置，进行定位

menu.style.left=e.clientX+'px';

menu.style.top=e.clientY+'px';

//改变自定义菜单的宽，让它显示出来

menu.style.width='125px';

}

//关闭右键菜单，很简单

window.οnclick=function(e){

//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能

// document.querySelector('#menu').style.height=0;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史