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. js插件---放大镜如何使用

    js插件---放大镜如何使用 一.总结 一句话总结:一张高清图片被用了两次,一次做缩略图,一次做放大后显示用的的图片(其实这个图片就是高清图片本身,而且是部分) 14 <figure class ...

  2. c#中文字符串与byte数组互相转化

    因为中文字符串一个字符占两个字节,所以不能用正常的方式与byte之间进行互相转化 中文字符串转成byte[] byte[] ping = Encoding.UTF8.GetBytes("你的 ...

  3. web存储方法，现成代码

    1.cookie的设置与取用 function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(e ...

  4. USACO 2009 Dec cow toll paths 过路费-floyd

    这道题首先要明确一点,那就是当你从一个点走到自己时,也是需要花费这个点点权值的费用.这个点卡了我两次QWQ 然后我比较喜欢分两步搞: 首先,我们利用floyd的一个性质:就是在更新其他点之间的路线时要 ...

  5. C#创建子线程，子线程使用委托更新控件

    一.背景 由于在窗体程序中通过点击一个button按键后需要更新TreeView控件的内容,由于等待时间比较长,主程序无法一起在那边等待,需要去处理其它的事情,所以就需要创建新的子线程来处理.因为主线 ...

  6. CISP/CISA 每日一题 14

    CISA 每日一题(答) 自动无人值守运行(LIGHTS-OUT)优势:1.信息系统运行成本的遏制/减少:2.持续运行(24/7):3.减少系统错误和中断次数. I/O 控制人员负责保证:1.批处理信 ...

  7. webpack4 多页面，多环境配置，逐行解释

    项目需求制作为新的app的分享页,故需要制作多页面应用,那既然app是新的,这边我们也要更新上,经过多方考察(度娘)下,综合了一些他人的优点并结合项目实况产生了此文. 本文为了解释详细,篇幅可能会较长 ...

  8. 从数据表中随机抽取n条数据有哪几种方法（join实现可以先查数据然后再拼接）

    从数据表中随机抽取n条数据有哪几种方法(join实现可以先查数据然后再拼接) 一.总结 一句话总结:最好的是这个:"SELECT * FROM table WHERE id >= (( ...

  9. [D3] Build a Scatter Plot with D3 v4

    Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They ...

  10. vscode markdown-all-in-one 源码编译成vsix

    https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one 有链接 Download Extensio ...