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

一、总结

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

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

contextmenu

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

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

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

  1. 40 $(document).contextmenu(function(event){
  2. 41     x=event.clientX;
  3. 42     y=event.clientY;
  4. 43
  5. 44     btn=event.button;
  6. 45
  7. 46     if(btn==2){
  8. 47         $('ul').show().css({'left':x+'px','top':y+'px'});
  9. 48         return false;
  10. 49     }
  11. 50 });

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

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

  1. 40 $(document).contextmenu(function(event){
  2. 41     x=event.clientX;
  3. 42     y=event.clientY;

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

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

  1. 40 $(document).contextmenu(function(event){
  2. 41     x=event.clientX;
  3. 42     y=event.clientY;

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

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

  1. 44     btn=event.button;
  2. 45
  3. 46     if(btn==2){

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

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

  1. 40 $(document).contextmenu(function(event){
  2. 41     x=event.clientX;
  3. 42     y=event.clientY;
  4. 43
  5. 44     btn=event.button;
  6. 45
  7. 46     if(btn==2){
  8. 47         $('ul').show().css({'left':x+'px','top':y+'px'});
  9. 48         return false;
  10. 49     }
  11. 50 });

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

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>index</title>
  6.      <style>
  7.          *{
  8.              margin:0px;
  9.              padding:0px;
  10.          }
  11.  
  12.          ul{
  13.              width:100px;
  14.              height:150px;
  15.              background: #ccc;
  16.              border-radius:10px;
  17.              position: absolute;
  18.              display: none;
  19.          }
  20.  
  21.          ul li{
  22.              text-align: center;
  23.              color:#fff;
  24.              font-weight: bold;
  25.              line-height: 25px;
  26.          }
  27.      </style>
  28.      <script src="jquery.js"></script>
  29.  </head>
  30.  <body>
  31.      <ul>
  32.          <li><a href='http://www.yzmedu.com' target='_blank'>云知梦</a></li>
  33.          <li>第一菜单</li>
  34.          <li>第一菜单</li>
  35.          <li>第一菜单</li>
  36.          <li>第一菜单</li>
  37.      </ul>
  38.  </body>
  39.  <script>
  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.  });
  51.  </script>
  52.  </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. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 托管代码（.NET）

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览  托管代码(.NET)         在SP2010中,微软提 ...

  2. hdoj-1870-愚人节的礼物(栈)

    愚人节的礼物 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  3. 例说linux内核与应用数据通信（四）：映射设备内核空间到用户态

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流,请勿用于商业用途]         一个进程的内存映象由以下几部分组成:代码段.数据段.BSS段和 ...

  4. onvif开发实战1--总结框架搭建

    Gsoap及开发框架生成: 一:gsoap下载和编译   1.下载Gsoap:地址:http://sourceforge.net/projects/gsoap2/files/gSOAP/ 2.安装: ...

  5. 2018/8/21 qbxt测试

    2018/8/21 qbxt测试 期望得分:0? 实际得分:0 思路:manacher   会写模板但是不会用 qwq 听了某人的鬼话,直接输出0,然后就gg了 #include <cstdio ...

  6. 《开源公开课分享》：Java开源框架案例分享

        缺乏高端技术人才?缺乏开发标准?    代码复用性低?技术风险难于把控?     招聘成本高?培训成本高?    假设想法不够雄伟,那么就会局限于细节:假设一開始就铺很大的摊子,将会失去控制: ...

  7. BPX-tree

    写的匆忙 估计有BUG 修改后  会去掉这个 说明 /** * @author shuly * @date 2017/6/5. */ // hint 一日为叶,终身为叶, 最后还是要转换成 <链 ...

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

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

  9. Scala具体解释---------数组、元组、映射

    一.数组 1.定长数组 声明数组的两种形式: 声明指定长度的数组 val 数组名= new Array[类型](数组长度) 提供数组初始值的数组,无需newkeyword Scala声明数组时.须要带 ...

  10. Android SlideAndDragListView，一个可排序可滑动item的ListView

    SlideAndDragListView简介 SlideAndDragListView,可排序.可滑动item显示”菜单”的ListView. SlideAndDragListView(SDLV)继承 ...