jquery-11 如何制作鼠标右键菜单

一、总结

一句话总结：核心原理：找到右键菜单事件contextmenu，return false去掉默认事件，然后判断用户是否点的右键，然后在鼠标的位置显示菜单。菜单弄成绝对定位，开始时设置为不显示。

1、右键菜单事件是什么？

contextmenu

40 $(document).contextmenu(function(event){

2、如何阻止默认的右键菜单事件？

在事件中return false可以阻止事件的默认行为

40 $(document).contextmenu(function(event){

41     x=event.clientX;

42     y=event.clientY;

43

44     btn=event.button;

45

46     if(btn==2){

47         $('ul').show().css({'left':x+'px','top':y+'px'});

48         return false;

49     }

50 });

3、如何使用事件发生的event对象？

事件发生会产生一个event对象，将它作为参数传递给匿名函数，即可在匿名函数中操作它

40 $(document).contextmenu(function(event){

41     x=event.clientX;

42     y=event.clientY;

4、如何获取鼠标在屏幕上面的位置？

有一个事件发生，将它的事件对象传递给匿名函数，在匿名函数中调用这个event对象的clientX和clientY即可获取它的鼠标位置

40 $(document).contextmenu(function(event){

41     x=event.clientX;

42     y=event.clientY;

5、如何判断用户是否点右键？

获取event对象的button属性，属性值为2即是鼠标右键，0左键，1滚轮。

44     btn=event.button;

45

46     if(btn==2){

6、如何将元素放在鼠标右键的位置？

先获取鼠标的位置（event对象的clientX和clientY属性），然后设置元素绝对定位，然后设置left和top属性即可

40 $(document).contextmenu(function(event){

41     x=event.clientX;

42     y=event.clientY;

43

44     btn=event.button;

45

46     if(btn==2){

47         $('ul').show().css({'left':x+'px','top':y+'px'});

48         return false;

49     }

50 });

二、如何制作鼠标右键菜单

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>index</title>

     <style>

         *{

             margin:0px;

             padding:0px;

         }

         ul{

             width:100px;

             height:150px;

             background: #ccc;

             border-radius:10px;

             position: absolute;

             display: none;

         }

         ul li{

             text-align: center;

             color:#fff;

             font-weight: bold;

             line-height: 25px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <ul>

         <li><a href='http://www.yzmedu.com' target='_blank'>云知梦</a></li>

         <li>第一菜单</li>

         <li>第一菜单</li>

         <li>第一菜单</li>

         <li>第一菜单</li>

     </ul>

 </body>

 <script>

 $(document).contextmenu(function(event){

     x=event.clientX;

     y=event.clientY;

     btn=event.button;

     if(btn==2){

         $('ul').show().css({'left':x+'px','top':y+'px'});

         return false;

     }

 });

 </script>

 </html>
 

jquery-11 如何制作鼠标右键菜单的更多相关文章

  1. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  2. Jquery如何禁止鼠标右键菜单

    jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...

  3. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  4. Qt creator 创建鼠标右键菜单 (不新建类)

    界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...

  5. 如何在C#添加鼠标右键菜单

    C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...

  6. 将EmEditor加入到鼠标右键菜单

    在清理系统的时候,无意中将EmEditor的鼠标右键功能给清理掉了,在EmEditor的配置中又没有找到如何加入到鼠标右键菜单的方法,只好使用导入注册表功能了,以下的代码,拷贝到记事本中,保存为EmE ...

  7. JAVA GUI学习 - JPopupMenu鼠标右键菜单组件学习

    public class JPopmenuKnow { public void test() { //为表格添加鼠标右键菜单 JMenuItem jMenuItemFileInfo = new JMe ...

  8. WinForm -- 为TextBox文本框添加鼠标右键菜单

    WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...

  9. Qt532.【转】Qt创建鼠标右键菜单

    ZC:可以通过 设置  (QWebView*)->setContextMenuPolicy(NoContextMenu); 来关闭 QWebView的默认右键菜单 Qt创建鼠标右键菜单_疯华正茂 ...

随机推荐

  1. mac自己定义tree命令

    编辑文件: vim ~/.bash_profile 在文件末尾追加: alias tree="find . -print | sed -e 's;[^/]*/;|____;g;s;____| ...

  2. 负载均衡器&amp;http正向代理

    透明的负载均衡器&http正向代理 * master-workers架构,http正向代理由独立的dns请求以及缓冲进程  * 使用epoll(ET)模式,採用全异步方式(双缓存,实现双向同一 ...

  3. JS实现文件另存为

    JS实现文件另存为 //下载平面图 function downPlan() { var oPop = window.open(src, "", "width=1, hei ...

  4. C# 异步延时执行

    https://blog.csdn.net/xiawu1990/article/details/78350253?utm_source=blogxgwz7 var t = Task.Run(async ...

  5. vue打包添加样式兼容前缀

    在ios8 版本上的h5对flex的支持不太好,需要有兼容的写法. vue-cli自带了postCss autoprefixer 进行兼容处理,配置如下 在vue-loader.config.js中开 ...

  6. 【Educational Codeforces Round 35 C】Two Cakes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 直觉题. 感觉情况会很少. 毕竟间隔太大了.中间肯定有一些数字达不到. 有1肯定可以 2 2 x肯定可以 3 3 3也可以 2 4 ...

  7. ontouch-控件添加ontouch监听事件

    1,代码public class CalculatorViewPager extends ViewPager {}中 package com.android.calculator2; import a ...

  8. 【Expression 序列化】WCF的简单使用及其Expression Lambada的序列化问题初步解决方案

    地址:http://www.cnblogs.com/guomingfeng/tag/Expression%E5%BA%8F%E5%88%97%E5%8C%96/

  9. POJ2029:Get Many Persimmon Trees(二维树状数组)

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  10. 一个DDOS病毒的分析(一)

    一.基本信息 样本名称:Rub.EXE 样本大小:21504 字节 病毒名称:Trojan.Win32.Rootkit.hv 加壳情况:UPX(3.07) 样本MD5:035C1ADA4BACE78D ...