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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
学习ExtJS form布局
Oct 08 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
jquery offset函数应用实例
Nov 14 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
在python中用url_for构造URL的方法
2019/07/25 Python
Django的性能优化实现解析
2019/07/30 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
争先创优公开承诺书
2014/08/30 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
店面出租协议书范本
2014/11/28 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
病房管理制度范本
2015/08/06 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers