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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
js动态引入的四种方法
May 05 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
浅谈js闭包理解
Mar 28 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php计算整个目录大小的方法
2015/06/01 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
基于jquery实现的自动补全功能
2015/03/12 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python结合API实现即时天气信息
2016/01/19 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python版中国省市经纬度
2020/02/11 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
应届生高等护理求职信
2013/10/12 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
领导工作表现评语
2015/01/04 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
公司业务员管理制度
2015/08/05 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL