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. 给Linux设置SSH登录邮件提醒

    给Linux设置SSH登录邮件提醒 心血来潮,用 last 命令查看了登录记录,不看不知道,一看就有问题.竟然有两个陌生的IP ,一个是美国欧莱雅的,一个是北京联通的.真是郁闷,密码简单了真不行 后来 ...

  2. org.omg.CORBA.MARSHAL: vmcid: SUN minor code: 211 completed: Maybe

    用weblogic 12c 测试 ejb3 import javax.naming.InitialContext; import javax.naming.NamingException; impor ...

  3. IntelliJ IDEA 启动tomcat 报错: idea Unable to open debugger port (127.0.0.1:58233): java.net.SocketException "socket closed"

    debug启动项目弹出提示 Error running omp: Unable to open debugger port (127.0.0.1:50812): java.net.SocketExce ...

  4. BZOJ2002: [Hnoi2010]Bounce 弹飞绵羊（LCT）

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在 他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装 ...

  5. Ubuntu系统简介

    1.ubuntu 远程连接 需要开启ssh 服务 sudo apt-get install openssh-server service ssh start|stop|restart 2.查看Linu ...

  6. Hadoop学习小结

    还在学校的时候,就知道Hadoop的存在了. 2012年在公司实习的时候,买了<Hadoop权威指南第2版>,大致看了下. 今年,抽空也大致喵了几眼. 最大的感悟就是:光看不做,还是不行. ...

  7. 一起talk C栗子吧（第九十 三回：C语言实例--进程间通信之临界资源）

    各位看官们.大家好,前面章回中咱们说的是使用信号和管道进行进程间通信的样例.这一回咱们说的样例是:进程间通信之临界资源.闲话休提,言归正转.让我们一起talk C栗子吧! 我们首先介绍一下,什么是临界 ...

  8. 1.2 Use Cases中 Event Sourcing官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Event Sourcing 事件采集 Event sourcing is a st ...

  9. python关于字典的操作

    https://www.cnblogs.com/RENQIWEI1995/p/7931374.html 最常用的代码举例: dict = {'Name': 'Zara', 'Age': 7, 'Cla ...

  10. Mycat常见问题与解决方案---宜将剩勇追穷寇，不可沽名学霸王

    1 Mycat目前有哪些功能与特性? 答: • 支持 SQL 92标准 • 支持Mysql集群,可以作为Proxy使用 • 支持JDBC连接多数据库 • 支持NoSQL数据库 • 支持galera f ...