js实现自定义右键菜单
更新时间：2020年05月18日 17:02:32 作者：百事可口
这篇文章主要为大家详细介绍了js实现自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现右键菜单的具体代码，供大家参考，具体内容如下
原理：
1.屏蔽默认的右键菜单
2.点击右键获取位置，让自定义菜单到点击位置上
3.点击左键，自定义菜单消失
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右键菜单练习</title>
<style>
*{
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;
}
</style>
</head>
<body>
<ul id="ul">
<li>复制</li>
<li>剪切</li>
<li>粘贴</li>
</ul>
<script>
//给document 添加 oncontextmenu 事件 取消默认的右键菜单的行为。
//点击右键的时候，获得点击的位置。
var ul = document.getElementById('ul');
document.oncontextmenu=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.onclick=function () {
ul.style.display='none';
};
//给每个li添加 鼠标进入(onmouseover)和鼠标离开(onmouseout)的事件
var lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover=function () {
lis[i].style.backgroundColor='rgb(204,204,204)';
};
lis[i].onmouseout=function () {
lis[i].style.backgroundColor='rgb(238,238,238)';
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
深入学习TypeScript类型系统的话，逆变、协变、双向协变、不变是绕不过去的概念。这些概念看起来挺高大上的，其实并不复杂，这篇文章我们就来学习下协变和逆变吧2022-10-10
js-FCC算法-No repeats please字符串的全排列(详解)
下面小编就为大家带来一篇js-FCC算法-No repeats please字符串的全排列(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了微信小程序实现发送短信验证码倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
JS是一门计算机编程语言，是一门动态语言也称为脚本语言，是解析型编程语言。需要了解跟多2012-11-11
Valerio 发布了 Mootools...2006-09-09
这篇文章主要介绍了ElementPlus Tag标签用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
本文主要给大家简单介绍了是什么是DOM、动态操作DOM元素的方法、使用jsjs操作样式以及Form对象的简介，是个人对于javascript中的DOM的理解的总结，推荐给小伙伴们。2015-03-03
距离某一时间点时间是多少，在本文将为大家介绍下js中是如何实现的，感兴趣的朋友不要错过2013-10-10
下拉列表在网站前端开发中经常遇到，如何操作html下拉列表标签，本篇文章给大家详解javascript如何操作html下拉列表标签，需要的朋友可以来参考下2015-08-08
JS可以用来播放多种声音文件,包括常见的mp3、wav等格式,这篇文章主要给大家介绍了关于JavaScript中播放音频文件的几种常用方法,需要的朋友可以参考下2023-10-10
最新评论