前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >鼠标右键弹出菜单

鼠标右键弹出菜单

作者头像
PHY_68
发布2020-09-16 14:33:51
2.9K0
发布2020-09-16 14:33:51
举报
文章被收录于专栏:laopan技术分享

鼠标右键弹出菜单

开发工具与关键技术:MVC

作者:盘洪源

撰写时间:2019年5月22日星期三

想必有很多人会遇到一些页面在点击右键的时候会弹出来一个菜单栏,这个并不是系统的那个菜单栏,而是自定义的菜单,这个效果要如何实现,看以下代码:

CSS代码:

代码语言:javascript
复制
   <div id="box"
style="width: 120px; height: 50px; position: absolute;display:none;z-index:9999;text-align:
center;background:white;box-shadow:1px 2px 3px black;">

        <div>导出Excel</div>

        <div>打印预览</div>

</div>

Jquery代码:

代码语言:javascript
复制
document.oncontextmenu = function(){

           return false;

       }

       $("#zhong").bind("contextmenu",
function (e) {



           var key = e.which;

           var x = e.clientX;

           var y = e.clientY;

           $("#box-data").show().css({
'left': x + 'px', 'top': y + 'px' });



       });





       $(document).click(function () {

           $("#box-data").hide();

       })

在这里我要实现的鼠标右键的效果是怎么样的?在对应的地方点击右键,菜单就在对应的位置显示出来,而在单击任何地方的时候把菜单隐藏掉。这个效果要怎样做到?

上面这个代码怎么理解呢,

代码语言:javascript
复制
document.oncontextmenu = function(){

         return false;

     }

这个就是把鼠标右键按钮弹出的浏览器菜单取消掉,这个不取消的等下这个鼠标右键事件就会弹出来两个菜单了。

再下面这一串代码,首先我这个是点击某个内容区的右键才弹出来菜单的,所以这个zhong是内容区的ID,然后就是获取鼠标点击的坐标位置,再把写好的菜单现在对应的坐标位置上。

代码语言:javascript
复制
   $(document).click(function () {

            $("#box-data").hide();

        })

这个是点击页面任何地方把菜单隐藏掉。

注意:

在菜单的css样式的最大div上要加个分层z-index:9999,还要加个绝对定位,这个是必须的。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/05/22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档