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. 21. Node.Js Buffer类（缓冲区）-（一）

    转自:https://blog.csdn.net/u011127019/article/details/52512242

  2. Day4上午解题报告

    预计分数:50 +0+0=50 实际分数:50+0+10=60 毒瘤出题人,T3不给暴力分 (* ￣︿￣) T1 https://www.luogu.org/problem/show?pid=T155 ...

  3. 体验SUSE （附视频演示）

    操作动画演示 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  4. Codefroces 760 B. Frodo and pillows

    B. Frodo and pillows time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. ORA-16047: DGID mismatch between destination setting and standby

    主库有报错如下: ORA-16047: DGID mismatch between destination setting and standby 原因:主库参数设置错误,检查下列参数:log_arc ...

  6. javascript 幻灯片代码(含自动播放)

    HTML <div class="slideshow-container"> <div class="mySlides fade"> & ...

  7. 父子margin塌陷

    1.使用padding 2.给父级使用border 3.给父级添加属性 overflow:hidden 4.浮动 5.定位{absolute,fixed} 6.伪元素代码 .parent:before ...

  8. [TS] Implement a doubly linked list in TypeScript

    In a doubly linked list each node in the list stores the contents of the node and a pointer or refer ...

  9. 1.2 Use Cases中 Messaging官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 下面是一些关于Apache kafka 流行的使用场景.这些领域的概述,可查看博客文 ...

  10. GIT，SVN，CVS的区别比较

    Git .CVS.SVN比较 项目源代码的版本管理工具中,比较常用的主要有:CVS.SVN.Git 和 Mercurial  (其中,关于SVN,请参见博客:SVN常用命令 和 SVN服务器配置) 目 ...