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. BZOJ1503: [NOI2004]郁闷的出纳员（Splay）

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...

  2. MockServer jar包安装

    github地址: https://github.com/jamesdbloom/mockserver 1. org.apache.maven.plugin-tools:maven-plugin-an ...

  3. vue使用jsonp

    axios不支持jsonp,所以需使用其他插件:vue-jsonp npm i vue-jsonp -S 然后在 src/main.js : import Vue from 'vue' import ...

  4. C# 文件转byte数组，byte数组再转换文件

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  5. 【例题 7-8 UVA - 10603】Fill

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 三维显然可以缩短为2维. 只要知道a,b瓶中的水量,c瓶中的水量减一下就能得到. 则设dis[a][b]表示a,b瓶中水量为a,b时 ...

  6. Spring HandlerInterceptor的使用

    http://blog.csdn.net/joeyon1985/article/details/49903761

  7. stm32单片机下载方式

    引用   编辑:什么鱼 引用地址:http://www.eeworld.com.cn/mcu/2015/1012/article_22873.html 第一种 ISP下载: 这里类似51. boot1 ...

  8. 每日技术总结：Yarn和Npm大PK

    今天想用npm安装vue-cli@2.9 npm install --global vue-cli@2.9 卡半天,安装不成功,清空缓存,换taobao源重来,还是一样. 无奈之下换yarn yarn ...

  9. HttpWatch--简介及使用技巧

    一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...

  10. docker安装及问题处理

    1.在Ubuntu的命令行中输入 sudo apt-get install docker.io 2.如果切换到了root用户下 apt-get install docker.io 3.对于新安装的Ub ...