js实现自定义右键菜单


Posted in Javascript onMay 18, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
如何使JavaScript休眠或等待
Apr 27 Javascript
微信小程序手动添加收货地址省市区联动
May 18 #Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 #Javascript
django简单的前后端分离的数据传输实例 axios
May 18 #Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 #Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
You might like
php设计模式 Proxy (代理模式)
2011/06/26 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
javascript每日必学之多态
2016/02/23 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python3中的bytes和str类型详解
2019/05/02 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
使用pandas读取文件的实现
2019/07/31 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
区域销售经理职责
2013/12/22 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
元旦促销方案
2014/03/15 职场文书
食品工程专业求职信
2014/06/15 职场文书
阅兵口号
2014/06/19 职场文书
庆六一活动总结
2014/08/29 职场文书
课外访万家心得体会
2014/09/03 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle