html 右键菜单 样式,js实现自定义右键菜单

本文实例为大家分享了js实现右键菜单的具体代码，供大家参考，具体内容如下

原理：

1.屏蔽默认的右键菜单

2.点击右键获取位置，让自定义菜单到点击位置上

3.点击左键，自定义菜单消失

代码如下

右键菜单练习

*{

margin: 0;

/*padding: 0;*/

}

ul{

width: 120px;

height: 150px;

background-color: rgb(204,204,204);

font-size: 22px;

list-style: none;

line-height: 50px;

position: fixed;

display: none;

}

li{

background-color: rgb(238,238,238);

padding-left: 15px;

}

• 复制
• 剪切
• 粘贴

//给document 添加 oncontextmenu 事件 取消默认的右键菜单的行为。

//点击右键的时候，获得点击的位置。

var ul = document.getElementById('ul');

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

e=e||window.event;

//屏蔽样式

e.preventDefault?e.preventDefault():(e.returnValue=false);

//获取坐标

var x=e.clientX;//视口的位置

var y=e.clientY;

//显示菜单

ul.style.display='block';

ul.style.top=y+'px';

ul.style.left=x+'px';

};

//点击左键 自定义菜单消失

document.οnclick=function () {

ul.style.display='none';

};

//给每个li添加 鼠标进入(onmouseover)和鼠标离开(onmouseout)的事件

var lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {

lis[i].οnmοuseοver=function () {

lis[i].style.backgroundColor='rgb(204,204,204)';

};

lis[i].οnmοuseοut=function () {

lis[i].style.backgroundColor='rgb(238,238,238)';

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。