js实现右键弹出自定义菜单


Posted in Javascript onSeptember 08, 2020

近期在项目中有一个右键菜单的需求,发现很多实现都比较复杂,于是自己花了一点时间稍微研究了一下,下面提供一个简洁的实现方法。

js声明部分:

//创建右键菜单
var epMenu={
  create:function(point,option){
    var menuNode=document.getElementById('epMenu');
    if(!menuNode){
      //没有菜单节点的时候创建一个
      menuNode=document.createElement("div");
      menuNode.setAttribute('class','epMenu');
      menuNode.setAttribute('id','epMenu');
    }else $(menuNode).html('');//清空里面的内容

    $(menuNode).css({left:point.left+'px',top:point.top+'px'});
    for(var x in option){
      var tempNode=document.createElement("a");
      $(tempNode).text(option[x]['name']).on('click',option[x].action);
      menuNode.appendChild(tempNode);
    }

    $("body").append(menuNode);
  },
  destory:function(){
    $(".epMenu").remove();
  }  
};

function sayhello(){
  alert("hellokity");
  epMenu.destory();
}

function hideSysMenu() {
  return false;
}

css样式定义部分:

.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family:微软雅黑; font-size:14px; cursor:default;}
.epMenu a:hover{ background:#fff;}

下面就是菜单的自定义调用部分了:

document.onmousedown = function(e){
    var menuNode=document.getElementById('epMenu');
    if(e.button===2){
      document.oncontextmenu = hideSysMenu;//屏蔽鼠标右键
      var evt = window.event || arguments[0];
      var rightedge = evt.clientX;
      var bottomedge = evt.clientY;
      epMenu.create({left:rightedge,top:bottomedge},[{name:'a1','action':sayhello},{name:'b2','action':sayhello},{name:'c3','action':sayhello},{name:'c4','action':sayhello}]);  
    }
//   epMenu.destory();
  }

简单解析一下:

1、epMenu.create方法的第一个参数是菜单弹出的位置坐标(距离屏幕左上角),这里用的是鼠标点击的坐标,菜单跟随鼠标点击弹出;第二个参数是一个json格式的数据,用于自定义菜单项,name是菜单项名字,action是点击菜单项后的动作(可以是函数,ajax请求等)。

2、e.button的值:2表示点击右键,0表示点击左键,4表示点击中键(ie),各浏览器的button值不同,此处仅以ie11作为参考。

3、注意在创建自定义菜单之前一定要屏蔽系统默认的右键菜单,非常重要!!!

最后,这个简易的右键菜单功能还有点瑕疵,右键菜单弹出后,不进行菜单项点击操作,菜单不会自动关闭,后期有空再完善吧。

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

Javascript 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
js中document.write的那点事
Dec 12 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue 使用原生组件上传图片的实例
Sep 08 #Javascript
使用js和canvas实现时钟效果
Sep 08 #Javascript
javascript使用canvas实现饼状图效果
Sep 08 #Javascript
vue配置多代理服务接口地址操作
Sep 08 #Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 #Javascript
JS删除对象中某一属性案例详解
Sep 08 #Javascript
vue全局使用axios的操作
Sep 08 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
浅析php header 跳转
2013/06/17 PHP
php广告加载类用法实例
2014/09/23 PHP
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
浅谈flask源码之请求过程
2018/07/26 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python3实现飞机大战游戏
2020/04/24 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python代码能做成软件吗
2020/07/24 Python
Python编写万花尺图案实例
2021/01/03 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
商场总经理岗位职责
2014/02/03 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
植树造林的宣传标语
2014/06/23 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript